Начать следует не с какой-то там логики, а со структуры данных, что содержит вопросы. То, что есть сейчас, никуда не годится. Что, если завтра вместо трёх вариантов ответа надо будет сделать четыре? Будете добавлять ещё по два свойства в каждый объект в массиве вопросов, а в компоненте закопипастите ещё один input? А если в разных вопросах должно будет быть разное количество вариантов ответа? Что тогда?
Варианты ответа складываете в массив, а корректный вариант обозначаете через его индекс:
const questions = [
{
text: 'Выберите верное утверждение',
answers: [
'СССР распался в 1997 году',
'Солнце вращается вокруг Земли',
'шестью восемь - двадцать три',
],
correctAnswer: 1,
},
{
text: '...',
answers: [ '...', '...', ... ],
correctAnswer: ...,
},
...
];
В компоненте вопроса вместо того, чтобы копипастить input'ы, делаете цикл по вариантам ответа:
function Question(props) {
const onChange = e => props.onAnswerChange(+e.target.value);
return (
<div>
<h3>{props.question.text}</h3>
<ol>
{props.question.answers.map((n, i) => (
<li>
<label>
<input
type="radio"
value={i}
checked={props.answer === i}
onChange={onChange}
/>
{n}
</label>
</li>
))}
</ol>
</div>
);
}
В родительском компоненте храните массив ответов:
function App(props) {
const [ answers, setAnswers ] = useState(Array(props.questions.length).fill(null));
const updateAnswer = (questionIndex, answer) =>
setAnswers(answers.map((n, i) => i === questionIndex ? answer : n));
return (
<div>
{props.questions.map((n, i) => (
<Question
question={n}
answer={answers[i]}
onAnswerChange={answer => updateAnswer(i, answer)}
/>
))}
</div>
);
}
Ну и возвращаясь к вашему вопросу, чего там надо было?
не получается сделать грамотную проверку правильного ответа...
Чтобы проверить правильность ответа, надо сравнить его со значением свойства correctAnswer у соответствующего (с тем же индексом) вопроса. Например, считаем количество правильных ответов:
const correctAnswersCount = answers.reduce((acc, n, i) => {
return acc + (n === questions[i].correctAnswer);
}, 0);
...и одновременно вывести верные ответы
Поскольку свойство, обозначающее правильный ответ, является его индексом, просто достаём соответствующие элементы из массивов с вариантами ответа:
const correctAnswers = questions.map(n => n.answers[n.correctAnswer]);
Ну а массив строк вывести - надеюсь, справитесь сами.
UPD.
Посмотреть живьём можно здесь (есть отличия от того, что есть или предполагается у вас - вопросы показываются по очереди, а не все сразу; в результатах отображаются только верные ответы).
