There are three possibilities I want to have for the className but I'm not sure how to set this up.

1. If answer option === correctAnswer then return 'answer-correct'
2. If chosenAnswer !== correctAnswer then return 'answer-incorrect'
3. Else return 'answer-options'

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:

    className={
            `answer-options 
             ${answerOption === correctAnswer ? 
             'answer-correct' : ``
}`

Since that didn't work I tried this but it doesn't work either

className={
              {if (answerOption === correctAnswer) {
                'answer-correct'
              } else if (chosenAnswer != correctAnswer) {
                'answer-incorrect'
              } else { 'answer-options' }
              }
               }

Code: https://replit.com/@arshia93/Quizzical#sections/Question.jsx

CodePudding user response：

answerOption === correctAnswer ? 'answer-correct'
: chosenAnswer !== correctAnswer ? 'answer-incorrect'
: 'answer-options'

So your className becomes:

className={
   answerOption === correctAnswer ? 'answer-correct'
   : chosenAnswer !== correctAnswer ? 'answer-incorrect'
   : 'answer-options'
}

As @WebbH mentions, this is known as conditional chaining.

To avoid defaulting to answer-incorrect when no answer has been given you could do a check to see if chosenAnswer exists, like so:

answerOption === correctAnswer ? 'answer-correct'
: chosenAnswer !== undefined && chosenAnswer !== correctAnswer ? 'answer-incorrect'
: 'answer-options'

But this gets messy quickly so I suggest following @Chris Bradshaw's suggestion.

CodePudding user response：

answerOption === correctAnswer ? 'answer-correct' : chosenAnswer !== correctAnswer ? 'answer-incorrect' : 'answer-options' 

CodePudding user response：

I think nested ternaries would be hard to read and could become harder to maintain if you had to add additional classes based on conditions, so I would separate it out into a separate function like this:

function answerClass({ answerOption, correctAnswer, chosenAnswer }) {
  if (answerOption === correctAnswer) {
    return "answer-correct";
  } else if (chosenAnswer != correctAnswer) {
    return "answer-incorrect";
  }
  return "answer-options";
}

export default function Question(props) {
  const {
    question,
    answers,
    correctAnswer,
    updateAnswers,
    chosenAnswer,
  } = props;
  return (
    <>
      <h3 className="questions">{`${decode(question)}`}</h3>
      {answers.map((answerOption, index) => (
        <div key={index}>
          <input
            key={answerOption}
            type="radio"
            name={`answer option-${question}`}
            id={`answer-options-${answerOption}`}
            value={answerOption}
            onChange={updateAnswers}
          />
          <label
            className={answerClass(props)}
            htmlFor={`answer-options-${question}`}
          >
            {`${decode(answerOption)}`}
          </label>
        </div>
      ))}
    </>
  );
}

CodePudding user response：

You can just chain ternary operators together

answerOption === correctAnswer ? : 'answer-correct' : chosenAnswer !== correctAnswer ? 'answer-incorrect' : 'answer-options'