title: How can I add multiple conditions to conditional operator?
body: <p>There are three possibilities I want to have for the className but I'm not sure how to set this up.</p>
  <ol>
  <li>If <code>answer option === correctAnswer</code> then return <code>'answer-correct'</code></li>
  <li>If <code>chosenAnswer !== correctAnswer</code> then return <code>'answer-incorrect'</code></li>
  <li>Else return <code>'answer-options'</code></li>
  </ol>
  <p>I could set it up to just do 2 of the above like so and don't see many examples of classNames without conditional operators:</p>
  <pre><code>    className={
              `answer-options 
               ${answerOption === correctAnswer ? 
               'answer-correct' : ``
  }`
  </code></pre>
  <p>Since that didn't work I tried this but it doesn't work either</p>
  <pre><code>className={
                {if (answerOption === correctAnswer) {
                  'answer-correct'
                } else if (chosenAnswer != correctAnswer) {
                  'answer-incorrect'
                } else { 'answer-options' }
                }
                 }
  </code></pre>
  <p>Code: <a href="https://replit.com/@arshia93/Quizzical#sections/Question.jsx" rel="nofollow noreferrer">https://replit.com/@arshia93/Quizzical#sections/Question.jsx</a></p>