Setting state of array objects

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