How can I conditionally disable an input selection using a prop?

Question

When a restart button is clicked on my quiz, I want the input selections to be removed. I tried testing disabled={restart === true} in my input selection on the question component, but it's not exactly working correctly. Any clue how to accomplish this? https://replit.com/@arshia93/Quizzical#sections/Question.jsx

Question component

export default function Question({question, answers, correctAnswer, updateAnswers, restart}) {    
    return (        
        <>
         <h3 className="questions">
            {`${decode(question)}`}
         </h3>
          {answers.map(( answerOption, index ) => (
             <div key={index}>
               <input 
                  disabled={restart === true}
                  type="radio"
                  name={`answer option-${question}`}
                  id={`answer-options-${answerOption}`}
                  value={answerOption}
                  onChange={updateAnswers}
                 />
                   <label 
                   className={`answer-options ${correctAnswer ? 'answer-correct' : ``}`}
                   htmlFor={`answer-options-${question}`}>
                   {`${decode(answerOption)}`}</label>
                </div>
                ))}          
        </>
    )
}

Quiz data component

export default function QuizData() {

    const [finished, setFinished] = React.useState(false)

    const [newQuiz, setNewQuiz] = React.useState(false)

    const [quizData, setQuizData] = React.useState([{
        question: "",
        answers: "",
        correctAnswer: ""
    }]);

    const [selections, setSelections] = React.useState([]);

    const [score, setScore] = React.useState(0)

    React.useEffect(() => {
        fetch("https://opentdb.com/api.php?amount=5&category=12&difficulty=medium&type=multiple")
            .then(res => res.json())
            .then(data => setQuizData(data.results.map(item => ({
                question: item.question,
                answers: arrayShuffle(item.incorrect_answers.concat(item.correct_answer)),
                correctAnswer: item.correct_answer
            }))))
    },[newQuiz]) 

    function handleSelectedAnswer(event) {
        const {value} = event.target
        setSelections(prevData => prevData.length > 0 ? [...prevData, value] : [value])
    }

    const allCorrectAnswers = quizData.map(item => item.correctAnswer)

    const totalScore = selections.reduce((score, selection) => 
    score + (allCorrectAnswers.includes(selection) ? 1 : 0) , 0);

    function complete() {
      setScore(totalScore)
      setFinished(true)
    }

    function restart() {
    setFinished(false)
    setNewQuiz(prevState => !prevState)
 }
    
    return (
        <div>
          { quizData.length > 1 ?
            (quizData.map((item, index) => (
                <div>
                    <Question 
                        key={index}
                        question={item.question}
                        answers={item.answers}
                        restart={newQuiz}
                        correctAnswer={finished === true ? item.correctAnswer : ""}
                        chosenAnswer={selections.selectedAnswer}
                        updateAnswers={handleSelectedAnswer}
                    />
                </div>
            ))) 
            : <p>Loading...</p>
          }
            {finished === false ? 
            <button
                className="quiz-button"
                onClick={complete}>
                Check answers
            </button>
            : 
            <>
              {`You scored ${score}/5  correct`} 
              <button
                className="quiz-button"
                onClick={restart}>
                Play again
              </button>
            </>
          }
        </div>
    )
}`

Answer 1

Closed the earlier thread, because might be missleading.

In fact (wtihtout the simplifications and clearing) all you need to do is just remove the

value={answerOption}
disabled={restart === true}

line from Question.jsx (line 18 and 15). You dont need to change the value dynamically here, since you always get new questions (thus no answers to display at the start) + no reason to disable it

add the key attribute for proper updates for the Question.jsx (Line 14)

key={answerOption}