title: Got multiple problems: can't populate option component with answers, stays empty all the time. Also handleShowScore does not work either
body: <p>//Database://</p>
  <p>const qData = [
  {
  id: 0,
  question: &quot;hey&quot;,
  answers: [
  { value: 1, text: &quot;rafael&quot; },
  { value: 2, text: &quot;dontaelo&quot; },
  { value: 3, text: &quot;leonardo&quot; },
  { value: 4, text: &quot;michelangelo&quot; }
  ]
  },
  {
  id: 1,
  question: &quot;hey hey&quot;,
  answers: [
  { value: 1, text: &quot;rafael&quot; },
  { value: 2, text: &quot;dontaelo&quot; },
  { value: 3, text: &quot;leonardo&quot; },
  { value: 4, text: &quot;michelangelo&quot; }
  ]
  }
  ];</p>
  <p>export default qData;</p>
  <p>//And the App itself//</p>
  <p>class PersonalityQuiz extends React.Component {
  state = {
  score: 0
  };</p>
  <pre><code>handleShowScore = e =&gt; {
      // const { answer } = this.state;
      let a = qData.querySelectorAll(&quot;select&quot;);
      let newScore = 0;
      for (let i = 0; i &lt; a.length; i++) {
          newScore = newScore + parseInt(a[i].answers.value, 10);
      }
  
      this.setState({
          score: newScore
      });
  };
  </code></pre>
  <p>//here i try populate option component with answer's text, so that based on chosen answer you calculate your total score//</p>
  <pre><code>render() {
      return (
          &lt;div&gt;
              &lt;h1&gt;Quiz&lt;/h1&gt;
              &lt;p&gt;Select your favorite of each of the following choices:&lt;/p&gt;
              &lt;div&gt;
                  {qData.map((item, index) =&gt; (
                      &lt;li key={index}&gt;
                          {item.question}
                          &lt;select&gt;
                              &lt;option value=&quot;item.answer&quot;&gt;{item.answers.text}&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/li&gt;
                  ))}
              &lt;/div&gt;
              &lt;button onClick={this.handleShowScore}&gt;Show Score&lt;/button&gt;
  
              &lt;p id=&quot;score&quot;&gt;You total score is {this.state.score} points.&lt;/p&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  <p>}
  ReactDOM.render(, document.querySelector(&quot;#root&quot;));</p>