title: How do I disable only the Clicked button for a mapped over component
body: <p>I am mapping over the <code>request</code> variable and rendering it on the page, it has an array of object with a <code>question</code>, <code>correct_answer</code> and <code>incorrect_answer</code> properties, and I also set a state named <code>disable</code> that is toggled between  true and false when the <code>correct_answer</code> button is clicked to make the correct answer button get disabled or unclickable for each question, but clicking the correct answer button for ONE question disables all correct answer buttons for the OTHER questions</p>
  <p>I basically want to disable the correct answer button on click or making it clickable once</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const [request, setRequest] = React.useState([])
  const [disable, setDisable] = React.useState(false);
  
  
  function scoreFunction (event){
   setDisable(true)
  setScore(prevScore =&gt; prevScore + 1)
  }
   
          
  React.useEffect (() =&gt; {
          fetch('https://opentdb.com/api.php?amount=5')
          .then(res =&gt; res.json())
          .then(data =&gt; setRequest(data.results.map(({ question, correct_answer, incorrect_answers }) =&gt; ({question, correct_answer, incorrect_answers}))))
      }, [])
  
      
      // console.log(request)
  
  const questionElements = request.map(req =&gt; {
      return (
          &lt;Question 
          question = {req.question}
          correct_answer ={req.correct_answer}
          incorrect_answers = {req.incorrect_answers}
          scoreFunction = {scoreFunction}
          disabled = {disable}
           /&gt;
      )
  })
  
  
  
  
  // The Question Component
  
  export default function Question (props){
  
  const incorrectAnswers = props.incorrect_answers.map(ans =&gt; {
      return (
          &lt;button className ="button"&gt;{ans}&lt;/button&gt;
      )
  })
      
      return(
          &lt;div  className = "question-div"&gt;
          &lt;h1 className = "question"&gt;{props.question}&lt;/h1&gt;
          &lt;div className = "answerBlock"&gt;
          &lt;button 
          disabled = {props.disabled}
          className ="button correct"
          onClick = {props.scoreFunction}&gt;{props.correct_answer} &lt;/button&gt;
          {incorrectAnswers}
          &lt;/div&gt;
          &lt;hr /&gt;
          &lt;/div&gt;
          
      )
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>