✅ – 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'
})
S
ScriptyChris536d ago
@Rinkusu show newTiles array please
L
LaRynk536d 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'
})
L
LaRynk536d ago
how is it possible ? xD
L
LaRynk536d 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')
})
S
ScriptyChris536d 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
L
LaRynk536d 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 ?$
S
ScriptyChris536d ago
? optional chaining operator? !mdn optional chaining
UU
Unknown User536d ago
L
LaRynk536d 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 !
UU
Unknown User535d ago