Setting state of array objects - reactjs

Question

Struggling with a simple setState for some reason.
this.state = {
dancers: [{name: "Dancer1", score1: 10, score2: 8, score3: 7, totalScore: 0},
{name: "Dancer2", score1: 5, score2: 7, score3: 8, totalScore: 0},
{name: "Dancer3", score1: 6, score2: 6, score3: 7, totalScore: 0},
{name: "Dancer4", score1: 9, score2: 5, score3: 6, totalScore: 0},
{name: "Dancer5", score1: 8, score2: 8, score3: 7, totalScore: 0},
{name: "Dancer6", score1: 10, score2: 9, score3: 10, totalScore: 0},
{name: "Dancer7", score1: 6, score2: 10, score3: 9, totalScore: 0},
{name: "Dancer8", score1: 8, score2: 4, score3: 6, totalScore: 0},]
}
}
calculateScore() {
const dancers = this.state.dancers;
dancers.map(dancer => {
return this.setState({dancer, totalScore: 10});
})
}
<Link to={{ pathname: "/top8" }} ><button className="create-button" onClick={() => this.calculateScore()}>Make Top 8</button></Link>
Right now I just want to find out why totalScore just doesn't update.

Answer 1

When you are doing this.setState({dancer, totalScore: 10}); it create dancer in the state which result like below
this.state = {
dancers: [{name: "Dancer1", score1: 10, score2: 8, score3: 7, totalScore: 0},
{name: "Dancer2", score1: 5, score2: 7, score3: 8, totalScore: 0},
{name: "Dancer3", score1: 6, score2: 6, score3: 7, totalScore: 0},
{name: "Dancer4", score1: 9, score2: 5, score3: 6, totalScore: 0},
{name: "Dancer5", score1: 8, score2: 8, score3: 7, totalScore: 0},
{name: "Dancer6", score1: 10, score2: 9, score3: 10, totalScore: 0},
{name: "Dancer7", score1: 6, score2: 10, score3: 9, totalScore: 0},
{name: "Dancer8", score1: 8, score2: 4, score3: 6, totalScore: 0},]
dancer: {name: "Dancer8", score1: 8, score2: 4, score3: 6, totalScore: 0},
totalScore: 10,
}
So you should do like below,
const calculatedDancers = dancers.map(dancer => {
return { ...dancer, totalScore: 10 }
})
this.setState({ dancers: calculatedDancers })

Answer 2

You should not modify state to do some calculations on existing state. If possible, derive the value from your state, as follows:
calculateScore() {
const dancers = this.state.dancers;
const dancersWithTotal = dancers.map(dancer => {
return { ...dancer, totalScore: 10 }
})
return dancersWithTotal
}
An even better solution would be to render a separate component for a single dancer and do the calculation of the total score there. This is more in line with React best practices where each component should only do one thing.
So you would have a Dancers component that handles the array of dancers, and then render multiple Dancer components that each calculate the total store based on their own, local props.