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

LLaRynk

10/30/2022

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'
    })

SScriptyChris

10/30/2022

@Rinkusu show newTiles array please

LLaRynk

10/30/2022

    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'
    })

LLaRynk

10/30/2022

how is it possible ? xD

LLaRynk

10/30/2022

    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')
    })

SScriptyChris

10/30/2022

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

LLaRynk

10/30/2022

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 ?$

SScriptyChris

10/30/2022

? optional chaining operator? !mdn optional chaining

UUUnknown User

10/30/2022

Message Not Public

LLaRynk

10/30/2022

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 !

UUUnknown User

10/31/2022

3 Messages Not Public

Looking for more? Join the community!

Reactiflux

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

Join Server

Reactiflux

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

Join Server

Want results from more Discord servers?

Add your server