title: Is there a way to trigger an event when mapping out a Component so that it only applies a style to that specific component?
body: <p>I'm building a quiz app and I have some components mapped out that when the user clicks an answer it highlights only the one they clicked but so far I've only gotten to work either on hover or just apply it to everybody.</p>
  
  <pre class="lang-js prettyprint-override"><code>export default function Quiz() {
      const [currentQuestion, setCurrentQuestion] = useState(4);
      const [currentAnswer, setCurrentAnswer] = useState("");
      const handleClick = e =&gt; {
          setCurrentAnswer(e.target.value);
      };
      const question = quiz.questions[currentQuestion];
      return (
          &lt;div className="container"&gt;
              &lt;Progress total="3" current="1" /&gt;
              &lt;Question question={question.name} /&gt;
              &lt;Answers
                  question={question}
                  currentAnswer={currentAnswer}
                  handleClick={handleClick}
              /&gt;
              &lt;button className="btn btn-primary"&gt;Confirm and Continue&lt;/button&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>function Answer(props) {
      let classes = ["answer"];
  
      if (props.selected) {
          classes.push("selected");
      }
  
      console.log(props.selected);
  
      console.log(classes.join(" "));
      return (
          &lt;button
              value={props.letter}
              className={classes.join(" ")}
              onClick={props.handleClick}
          &gt;
              &lt;span className="letter"&gt;{props.letter}&lt;/span&gt;
              {props.answer}
          &lt;/button&gt;
      );
  }
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>function Answers(props) {
      return (
          &lt;&gt;
              {props.question.options.map((e, index) =&gt; {
                  const answer = index + 1;
                  return (
                      &lt;&gt;
                          &lt;Answer
                              letter={answer}
                              answer={e.name}
                              selected={answer}
                              handleClick={props.handleClick}
                          /&gt;
                      &lt;/&gt;
                  );
              })}
          &lt;/&gt;
      );
  }
  </code></pre>
  
  <p>This is how my project is setup so far and have been stuck with this problem for a while now </p>