title: Why is my radio input can only choose one option in the whole array list of array map?
body: <p>This is the third time I'm asking because the 2 posts previous don't have any answers, because I'm really really stuck on this problem for a whole few days, so please pardon me, because I have tried a few ways but it keeps not work like what I wanted.</p>
  <p>Can someone help me out, I use an array map to list out all of my questions and answers based on question_ID</p>
  <p>Here's the json that I use Axios to get it.</p>
  <pre><code>[
      {
          &quot;question_ID&quot;: 13,
          &quot;question_desc&quot;: &quot;This is question 1&quot;,
          &quot;quiz_ID&quot;: 6,
          &quot;answer_ID&quot;: 17,
          &quot;answer_desc&quot;: &quot;A&quot;,
          &quot;answer_result&quot;: 1
      },
      {
          &quot;question_ID&quot;: 13,
          &quot;question_desc&quot;: &quot;This is question 1&quot;,
          &quot;quiz_ID&quot;: 6,
          &quot;answer_ID&quot;: 18,
          &quot;answer_desc&quot;: &quot;B&quot;,
          &quot;answer_result&quot;: 1
      },
      {
          &quot;question_ID&quot;: 13,
          &quot;question_desc&quot;: &quot;This is question 1&quot;,
          &quot;quiz_ID&quot;: 6,
          &quot;answer_ID&quot;: 19,
          &quot;answer_desc&quot;: &quot;C&quot;,
          &quot;answer_result&quot;: 0
      },
      {
          &quot;question_ID&quot;: 14,
          &quot;question_desc&quot;: &quot;Question 2&quot;,
          &quot;quiz_ID&quot;: 6,
          &quot;answer_ID&quot;: 20,
          &quot;answer_desc&quot;: &quot;A&quot;,
          &quot;answer_result&quot;: 0
      },
      {
          &quot;question_ID&quot;: 14,
          &quot;question_desc&quot;: &quot;Question 2&quot;,
          &quot;quiz_ID&quot;: 6,
          &quot;answer_ID&quot;: 21,
          &quot;answer_desc&quot;: &quot;B&quot;,
          &quot;answer_result&quot;: 1
      },
      {
          &quot;question_ID&quot;: 15,
          &quot;question_desc&quot;: &quot;Question 3&quot;,
          &quot;quiz_ID&quot;: 6,
          &quot;answer_ID&quot;: 22,
          &quot;answer_desc&quot;: &quot;A&quot;,
          &quot;answer_result&quot;: 1
      },
      {
          &quot;question_ID&quot;: 15,
          &quot;question_desc&quot;: &quot;Question 3&quot;,
          &quot;quiz_ID&quot;: 6,
          &quot;answer_ID&quot;: 23,
          &quot;answer_desc&quot;: &quot;B&quot;,
          &quot;answer_result&quot;: 0
      },
      {
          &quot;question_ID&quot;: 16,
          &quot;question_desc&quot;: &quot;Question 4&quot;,
          &quot;quiz_ID&quot;: 6,
          &quot;answer_ID&quot;: 24,
          &quot;answer_desc&quot;: &quot;A&quot;,
          &quot;answer_result&quot;: 0
      },
      {
          &quot;question_ID&quot;: 16,
          &quot;question_desc&quot;: &quot;Question 4&quot;,
          &quot;quiz_ID&quot;: 6,
          &quot;answer_ID&quot;: 25,
          &quot;answer_desc&quot;: &quot;B&quot;,
          &quot;answer_result&quot;: 1
      },
      {
          &quot;question_ID&quot;: 17,
          &quot;question_desc&quot;: &quot;Question 5&quot;,
          &quot;quiz_ID&quot;: 6,
          &quot;answer_ID&quot;: 26,
          &quot;answer_desc&quot;: &quot;Testing Answer&quot;,
          &quot;answer_result&quot;: 0
      }
  ]
  </code></pre>
  <p>Then I use reduce to group the questions, for example, it'll like Question_ID: 13, Question_ID: 14, each of it'll have a list of answer inside there</p>
  <p><a href="https://i.stack.imgur.com/okIQK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/okIQK.png" alt="enter image description here" /></a></p>
  <p>What's displayed in the console is when I'm pressing the next button, it'll go back and forth in the array of the grouped questions that I've just used to reduce to group it.</p>
  <p>Then I map that grouped questions to display a radio input, it displays perfectly fine.</p>
  <p>But the problem is when I click on the radio, for example Question 1, I choose 1 of 3 answers that I want</p>
  <p><a href="https://i.stack.imgur.com/b56kz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b56kz.png" alt="enter image description here" /></a></p>
  <p>Then I'm pressing next to go to the next index of the grouped array to display a new list of answers
  , and I repeat choose the answers that I want</p>
  <p><a href="https://i.stack.imgur.com/01RQh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/01RQh.png" alt="enter image description here" /></a></p>
  <p>The problem starts to appear, if I press Previous to change or to look back at the previous answers, it disappears, as I can only choose 1 in my list of array, please help and explain because I don't understand.</p>
  <p>The previous answers disappear</p>
  <p><a href="https://i.stack.imgur.com/RtQGG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RtQGG.png" alt="enter image description here" /></a></p>
  <p>Here are my code:</p>
  <pre><code>import axios from &quot;axios&quot;;
  import { Component } from &quot;react&quot;;
  import jwt_decode from &quot;jwt-decode&quot;;
  
  class QuizForm extends Component {
      constructor(props) {
          super(props);
          this.state = {
              step: 0,
              dataQuestion: [],
              question: 1,
              answer: [],
              groupQues: [],
              selectedRadio: null,
          };
      }
      // ------------------
  
  // Get list of questions + answers based on the Topic ID//
      async componentDidMount() {
          await axios
              .get(&quot;http://localhost:3000/quiz/&quot; + this.props.quizID)
              .then((res) =&gt; {
                  this.setState({
                      dataQuestion: res.data,
                  });
              })
  
  // Then I group it like the picture from above using reduce//
              .then(() =&gt; {
                  let grouped = this.state.dataQuestion.reduce((acc, obj) =&gt; {
                      const property = obj[&quot;question_ID&quot;];
                      acc[property] = acc[property] || [];
                      acc[property].push(obj);
                      return acc;
                  }, {});
                  this.setState({ groupQues: grouped });
              })
              .then(() =&gt; {
                  var token = localStorage.token;
                  var decoded = jwt_decode(token);
              })
              .catch((error) =&gt; console.log(error));
      }
      // -------------------
  // The next and previous button to handle switching index in the array //
      handleNext = (answer_ID) =&gt; {
          let grouped = this.state.dataQuestion.reduce((acc, obj) =&gt; {
              const property = obj[&quot;question_ID&quot;];
              acc[property] = acc[property] || [];
              acc[property].push(obj);
              return acc;
          }, {});
  
          if (this.state.step === Object.keys(grouped).length - 1) {
              return;
          }
          this.setState({ step: this.state.step + 1 });
          this.setState({ question: this.state.question + 1 });
  
          // this.setState({selectedRadio: null})
      };
      handlePrevious = (answer_ID) =&gt; {
          if (this.state.step === 0) {
              return;
          }
          this.setState({ step: this.state.step - 1 });
          this.setState({ question: this.state.question - 1 });
      };
      handleSelect = (answer_ID) =&gt; {
          this.setState({ selectedRadio: answer_ID });
      };
      // ---------------------
      render() {
          const { question } = this.state;
  
          return (
              &lt;&gt;
                  &lt;div className=&quot;column middle&quot;&gt;
                      &lt;div className=&quot;game-details-container&quot;&gt;
                          &lt;h1&gt;
                              {&quot; &quot;}
                              Question : &lt;span id=&quot;question-number&quot;&gt;&lt;/span&gt;
                              {question}/{Object.keys(this.state.groupQues).length}
                          &lt;/h1&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;game-quiz-container&quot;&gt;
                          {
                              this.state.groupQues[
                                  Object.keys(this.state.groupQues)[this.state.step]
                              ]?.[0].question_desc
                          }
                          &lt;div className=&quot;game-options-container&quot;&gt;
  // In here I'm using map to get list out an array of answers based on question_ID
                              {this.state.groupQues[
                                  Object.keys(this.state.groupQues)[this.state.step]
                              ]?.map((element, i) =&gt; {
                                  return (
                                      &lt;div key={i}&gt;
                                          &lt;input
                                              type=&quot;radio&quot;
                                              checked={this.state.selectedRadio === element.answer_ID}
                                              onChange={() =&gt; this.handleSelect(element.answer_ID)}
                                              id={element.answer_ID}
                                              name={element.question_desc}
                                              value={element.answer_result}
                                          /&gt;
                                          &lt;label htmlFor={element.question_desc}&gt;
                                              {element.answer_desc}
                                          &lt;/label&gt;
                                      &lt;/div&gt;
                                  );
                              })}
                          &lt;/div&gt;
                          &lt;div className=&quot;next-button-container&quot;&gt;
                              &lt;button onClick={() =&gt; this.handlePrevious()}&gt;
                                  Previous Question
                              &lt;/button&gt;
                              &lt;button onClick={() =&gt; this.handleNext()}&gt;Next Question&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/&gt;
          );
      }
  }
  export default QuizForm;
  </code></pre>