LaRynk•2y ago

✅ – Axel (Rinkusu) – 20-53 Oct 30

Hi, can someone explains me how is it possible that every color is set to 'blue' after this please ?

    newTiles.forEach((elem, i) => {
      elem.color = i % 2 === 0 ? 'blue' : 'red'
    })

    newTiles.forEach((elem, i) => {
      elem.color = i % 2 === 0 ? 'blue' : 'red'
    })

11 Replies

ScriptyChris•2y ago

@Rinkusu show newTiles array please

LaRynk•2y ago

    let newTiles = Array(64).fill({color: undefined, piece: undefined})

    console.log(newTiles)
    newTiles.forEach((elem, i) => {
      elem.color = i % 2 === 0 ? 'blue' : 'red'
    })

    let newTiles = Array(64).fill({color: undefined, piece: undefined})

    console.log(newTiles)
    newTiles.forEach((elem, i) => {
      elem.color = i % 2 === 0 ? 'blue' : 'red'
    })

LaRynk•2y ago

how is it possible ? xD

LaRynk•2y ago

    console.log(newTiles)
    newTiles.forEach((elem, i) => {
      console.log('HERE:', i % 2 === 0)
      elem.color = (i % 2 === 0 ? 'blue' : 'red')
    })

    console.log(newTiles)
    newTiles.forEach((elem, i) => {
      console.log('HERE:', i % 2 === 0)
      elem.color = (i % 2 === 0 ? 'blue' : 'red')
    })

ScriptyChris•2y ago

The thing is that your array contains of a single object reference, which - despite having assigned different color each iteration ( you can validate it by console.log(elem.color) below the assignment) - at the end of the loop gets assigned one color, and it's so remaining "clones" have the same value If you want it to work "properly" then use .map() instead of .forEach() and return a fresh object on every iteration

let newTiles = Array(64)
  .fill({color: undefined, piece: undefined})
  .map((elem, i) => {
    elem.color = i % 2 === 0 ? 'blue' : 'red';
    return {...elem}; // return a copied object, so in fact a new reference
  })

console.log(newTiles) // logs objects with mixed blue/red color

let newTiles = Array(64)
  .fill({color: undefined, piece: undefined})
  .map((elem, i) => {
    elem.color = i % 2 === 0 ? 'blue' : 'red';
    return {...elem}; // return a copied object, so in fact a new reference
  })

console.log(newTiles) // logs objects with mixed blue/red color

LaRynk•2y ago

Ok, I reworked and got this:

    let newTiles = Array(64).fill({color: undefined, piece: undefined})
    let nextColor = beigeColor

    setTiles(newTiles?.map((elem, i) => {
      let newElem = {...elem}

      if (i % 8 !== 0) {nextColor = nextColor === beigeColor ? brownColor : beigeColor}
      if (nextColor === brownColor) {
        newElem.piece.color = i < 24 ? 'black' : i > 39 ? 'white' : undefined
      }
      newElem.color = nextColor
      return newElem
    }))
  }

    let newTiles = Array(64).fill({color: undefined, piece: undefined})
    let nextColor = beigeColor

    setTiles(newTiles?.map((elem, i) => {
      let newElem = {...elem}

      if (i % 8 !== 0) {nextColor = nextColor === beigeColor ? brownColor : beigeColor}
      if (nextColor === brownColor) {
        newElem.piece.color = i < 24 ? 'black' : i > 39 ? 'white' : undefined
      }
      newElem.color = nextColor
      return newElem
    }))
  }

"Cannot set properties of undefined (setting 'color')" Because first, "piece" is undefined. So how can I set it to an object with a color attribute inside of it please ?$

ScriptyChris•2y ago

? optional chaining operator? !mdn optional chaining

reactibot•2y ago

MDN

Optional chaining (?.)

LaRynk•2y ago

no it would be an invalid left-assignement expression I guess it works like this:

  if (nextColor === brownColor) {
          newElem.piece = {
            color: i < 24 ? 'black' : i > 39 ? 'white' : undefined,
            isLady: false
          }
        }

  if (nextColor === brownColor) {
          newElem.piece = {
            color: i < 24 ? 'black' : i > 39 ? 'white' : undefined,
            isLady: false
          }
        }

thx anyway !

reactibot•2y ago

This question has an answer! Thank you for helping 😄 If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/565213527673929729/1036382237714829392

reactibot•2y ago

This thread hasn’t had any activity in 12 hours, so it’s now locked. Threads are closed automatically after 12 hours. If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/565213527673929729/1036382237714829392 Question not getting answered? Maybe it's hard to answer, or maybe you asked at a slow time. Check out these resources for help asking a good question: https://stackoverflow.com/help/how-to-ask http://wp.me/p2oIwo-26