在JavaScript中访问嵌套数组项

Question

I'm using the javascript trivia API to make an application. I'm having issues displaying each of the values of the wrong answer.

So far I have saved them in my state, along with the questions, and the correct answer

componentDidMount() {
  axios.get('https://opentdb.com/api.php?amount=50').then(response => {
    for (var key in response.data.results) {
      console.log(response.data.results[key].question)
      this.setState(prevState => ({
        questions: [...prevState.questions, response.data.results[key].question],
        answers: [...prevState.answers, response.data.results[key].correct_answer],
        wrongAnswers: [...prevState.wrongAnswers, response.data.results[key].incorrect_answers]

      }));
    }
  });
}

this works fine, but my issue is that the wrong answers is an array itself, so whenever I display the state

<p>{this.state.wrongAnswers[this.state.random]}</p> // prints array of strings

I get another array, and I can access each element using the dot operator, because I don't know the answers since the questions are chosen randomly.

I want to display the values dynamically using radio buttons. Is there a way to access each element of the nested array and display them dynamically?

Answer 1

You can loop through that array and show the wrong answers

{Array.isArray(this.state.wrongAnswers) && this.state.wrongAnswers.map((wrongAnswer, index) => {
  <p key={'Key-'+index}>wrongAnswer}</p>
}}