title: How can I show the list of all the question with answers in a quiz app in React
body: <p>I am trying to build a quiz app in React.
  I have added all the functionalities that the app requires, but I also want to show at the end, the questions attempted and the correct and wrong answers given and if the answer is not correct I want to make the color of the question red and also show the correct answer for that question.</p>
  <p>Here is my onSubmit function:</p>
  <pre><code>const onsubmit = () =&gt; {
      let list = quiz_Set;
      let count = 0;
  
      list.map((item, key) =&gt; {
          item.options.map((ans_list, key) =&gt; {
              if (ans_list.selected === true &amp;&amp; ans_list.isCorrect) {
                  if (ans_list.isCorrect) {
                      
                      count = count + 1;
                  }
              }
          });
      });
  
      setShowScore(true);
      setScore(count);
  };
  </code></pre>
  <p>and here is my Jsx:</p>
  <pre><code> {showScore ? (
              &lt;div className=&quot;Quiz-DisplayResult&quot;&gt;
                  &lt;h2&gt;
                      {&quot; &quot;}
                      The score is {score} Out Of {quiz_Set.length}{&quot; &quot;}
           {/* I want the show the question and answers liste here */}
                  &lt;/h2&gt;
              &lt;/div&gt;
          ) : (
              // show the question and answer option with radio buttons
              &lt;div&gt;
                  {quiz_Set.map((item, index) =&gt; {
                      if (Math.abs(activeStep - index) &lt;= 0) {
                          return (
                              &lt;div&gt;
                                  {/* question */}
                                  &lt;div&gt;Countdown: {counter}&lt;/div&gt;
                                  &lt;div className=&quot;Quiz_que&quot;&gt;
                                      {item.question_no}) {item.question}
                                  &lt;/div&gt;
                                  {/* answers */}
                                  {item.options.map((ans, index_ans) =&gt; {
                                      index_ans = index_ans + 1;
                                      return (
                                          &lt;div
                                              key={index_ans}
                                              className=&quot;Quiz_multiple_options&quot;
                                          &gt;
                                              {index_ans}]
                                              &lt;input
                                                  key={index_ans}
                                                  type=&quot;radio&quot;
                                                  name={item.question_no}
                                                  value={ans.que_options}
                                                  checked={!!ans.selected}
                                                  onChange={onInputChange}
                                              /&gt;
                                              {ans.que_options}
                                          &lt;/div&gt;
                                      );
                                  })}
                              &lt;/div&gt;
                          );
                      } else {
                          return null;
                      }
                  })}
  </code></pre>
  <p>All of these questions and answers are coming from and js object that looks like this:</p>
  <pre><code>export const Quiz_Set = [
  {
      question_no: &quot;1&quot;,
      question: &quot;How many sides are equal in a scalene triangle?&quot;,
      options: [
          { que_options: &quot;3&quot;, selected: false, isCorrect: true },
          { que_options: &quot;2&quot;, selected: false, isCorrect: true },
          { que_options: &quot;0&quot;, selected: false, isCorrect: true },
          { que_options: &quot;1&quot;, selected: false, isCorrect: true },
      ],
  },
  {
      question_no: &quot;2&quot;,
      question: &quot;How many sides are equal in a scalene triangle?&quot;,
      options: [
          { que_options: &quot;3&quot;, selected: false, isCorrect: true },
          { que_options: &quot;2&quot;, selected: false, isCorrect: true },
          { que_options: &quot;0&quot;, selected: false, isCorrect: true },
          { que_options: &quot;1&quot;, selected: false, isCorrect: true },
      ],
  },
  {
      question_no: &quot;3&quot;,
      question: &quot;How many sides are equal in a scalene triangle?&quot;,
      options: [
          { que_options: &quot;3&quot;, selected: false, isCorrect: true },
          { que_options: &quot;2&quot;, selected: false, isCorrect: true },
          { que_options: &quot;0&quot;, selected: false, isCorrect: true },
          { que_options: &quot;1&quot;, selected: false, isCorrect: true },
      ],
  },
  {
      question_no: &quot;4&quot;,
      question: &quot;How many sides are equal in a scalene triangle?&quot;,
      options: [
          { que_options: &quot;3&quot;, selected: false, isCorrect: true },
          { que_options: &quot;2&quot;, selected: false, isCorrect: true },
          { que_options: &quot;0&quot;, selected: false, isCorrect: true },
          { que_options: &quot;1&quot;, selected: false, isCorrect: true },
      ],
  },
  {
      question_no: &quot;5&quot;,
      question: &quot;How many sides are equal in a scalene triangle?&quot;,
      options: [
          { que_options: &quot;3&quot;, selected: false, isCorrect: true },
          { que_options: &quot;2&quot;, selected: false, isCorrect: true },
          { que_options: &quot;0&quot;, selected: false, isCorrect: true },
          { que_options: &quot;1&quot;, selected: false, isCorrect: true },
      ],
  },
  </code></pre>
  <p>];</p>
  <p><em>How can I show the list of all the questions and answers at the end of the quiz</em></p>