lapis anvil
The code works till i style the held dice to green but the moment i introduce the holdDice function it shows this error, i tried everything and error still seems to remain. It looks like the error is somewhere near the spread syntax, i even tried naming each of the properties individually, it still did not work
import React from "react"
import Die from "./Die"
import {nanoid} from "nanoid"
export default function App() {
const [dice, setDice] = React.useState(allNewDice())
function generateNewDie() {
return {
value: Math.ceil(Math.random() * 6),
isHeld: false,
id: nanoid()
}
}
function allNewDice() {
const newDice = []
for (let i = 0; i < 10; i++) {
newDice.push(generateNewDie())
}
return newDice
}
function rollDice() {
setDice(oldDice => oldDice.map(die => {
return die.isHeld ?
die :
generateNewDie()
}))
}
function holdDice(id) {
setDice(oldDice => oldDice.map(die => {
return die.id === id ?
{...die, isHeld: !die.isHeld} : //error on this line
//^
die
}))
}
const diceElements = dice.map(die => (
<Die
key={die.id}
value={die.value}
isHeld={die.isHeld}
holdDice={() => holdDice(die.id)}
/>
))
return (
<main>
<div className="dice-container">
{diceElements}
</div>
<button className="roll-dice" onClick={rollDice}>Roll</button>
</main>
)
}
empty nest
tall cove
granite summit
solar bloom
