Change the state input which is a JSON Object that is present inside an array of JSON

Question

For now my code looks like this. it is basically an an quiz app. By default when the page loads the question appear at bottom. we have four contestants and before answering a question one have to click on any of the buzzer button given after that when clicking on the options if correct it will throw an alert saying correct answer and will increase the point of that particular contestant by 3 if wrong answer then decrease the value of point by 1.

After clicking on the buzzer button the state has an object called playerBuzzer which is by default null get changed to specified index no. of array for eg if james buzzer is clicked playerBuzzer changes to 0,if steve buzzer is clicked playerBuzzer changes to 3. so now what i want is that , so suppose i click the buzzer button now the state of playerBuzzer changes to a particular index now i want to change the "point" of that particular index of array increment if correct answer decrement if wrong answer(i will be showing only the necessary code )

class Sec2 extends Component {
  state = {
    players: [
      {
        name: "James",
        point: 0
      },
      {
        name: "Julia",
        point: 0
      },
      {
        name: "Martha",
        point: 0
      },
      {
        name: "Steve",
        point: 0
      }
    ],
buzz(z) {//changes the playerBuzzer when buzzer button is clicked
    if (z == "James") {
      this.setState({ playerBuzzer: 0 });
    }
    if (z == "Julia") {
      this.setState({ playerBuzzer: 1 });
    }
    if (z == "Martha") {
      this.setState({ playerBuzzer: 2 });
    }
    if (z == "Steve") {
      this.setState({ playerBuzzer: 3 });
    }
  }
 checkAnswer(x) { //When the option under question is clicked this method 
                   // happens
    if (this.state.currentQuestion == 1 && x == "New Delhi") {
      alert("Correct Answer");
      this.setState({ currentQuestion: 2 });
    } else if (this.state.currentQuestion == 1 && x != "New Delhi") {
      alert("Wrong Answer");
      this.setState({ currentQuestion: 2 });
    }
     if (this.state.currentQuestion == 2 && x == "Paris") {
      alert("Correct Answer");
      this.setState({ currentQuestion: 3 });
    } else if (this.state.currentQuestion == 2 && x != "Paris") {
      alert("Wrong Answer");
      this.setState({ currentQuestion: 3 });
    }
    if (this.state.currentQuestion == 3 && x == "Pound") {
      alert("Correct Answer");
      this.setState({ currentQuestion: 4 });
    } else if (this.state.currentQuestion == 3 && x != "Pound") {
      alert("Wrong Answer");
      this.setState({ currentQuestion: 4 });
    }
     if (this.state.currentQuestion == 4 && x == "8848 m") {
      alert("Correct Answer");
      this.setState({ currentQuestion: 5 });
    } else if (this.state.currentQuestion == 4 && x != "8848 m") {
      alert("Wrong Answer");
      this.setState({ currentQuestion: 5 });
    }
    if  (this.state.currentQuestion == 5 && x == "Tokyo") {
      alert("Correct Answer");
      this.setState({ currentQuestion: 6 });
    }     else if (this.state.currentQuestion == 5 && x != "Tokyo") {
      alert("Wrong Answer");
      this.setState({ currentQuestion: 6 });
    }
  }[![initial output][1]][1]

Answer 1

I doesn't have all the context, so maybe I miss something ;)

I rewrite your state management to make things clearer.

But I don't know from where you fetch your questions and answers, so I hope it helps you at least.

... your class
  state = {
    playerBuzzer: null,
    players: {
      James: {
        name: "James",
        point: 0
      },
      Julia: {
        name: "Julia",
        point: 0
      },
      Martha: {
        name: "Martha",
        point: 0
      },
      Steve: {
        name: "Steve",
        point: 0
      }
    },
    currentQuestion: 1,
    answers: {
      1: "New Delhi",
      2: "Paris" // and so on
    }
  };

  buzz(playerId) {
    //changes the playerBuzzer when buzzer button is clicked
    this.setState({
      playerBuzzer: playerId
    });
  }

  checkAnswer(answer) {
    const { answers, currentQuestion, playerBuzzer, players } = this.state; // This is know as destructuration. You "explode" the state in variables.
    const { point } = players[playerBuzzer];
    const isCorrect = answers[currentQuestion] === answer; // We get the response for the current question. Normalization makes things magic :)
    const nextQuestion = currentQuestion + 1;
    //When the option under question is clicked this method
    // happens
    let updatedPoints;

    if (isCorrect) {
      updatedPoints = point + 1;
      alert("Correct Answer");
    } else {
      updatedPoints = point - 1;
      alert("Wrong Answer");
    }

    this.setState({
      players: {
        ...players, // required to not delete all users :)
        [playerBuzzer]: {
          point: updatedPoints
        }
      },
      currentQuestion: nextQuestion
    });
  }

The idea is to "normalize" your data structure to make things easier.

This is not directly related to your question, but you can learn a lot with this link (redux is a superior state management for react apps but out of the scope here ;))

https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape

Answer 2

Each player should be it's own class.

class Player{
   constructor(name)..
}

To each button you assign that player with event listener. Then you run your checkAnswer function (which should return boolean). If true player.score += 3 else player.score--;

And I think that you should assign to each answer only boolean values like with class="bad-answer" / "good-answer". Because you won't have headaches when generating dynamically content. :)