I'm trying to change the state created with the useState hook when clicked. But I do not understand this mistake. Uncaught TypeError: Cannot read properties of undefined (reading 'undefined'). I do not understand why this happens after setState (state.activeQuestion + 1)
import React, {useState} from 'react'
import classes from './Quiz.module.css'
import ActiveQuiz from '../../components/ActiveQuiz/ActiveQuiz'
export default function Quiz () {
const [state, setState] = useState(
{ activeQuestion: 0,
quiz: [
{
question: 'Якого коліру небо',
rightAnswerId: 2,
id: 1,
answers: [
{text: 'чорний', id: 1},
{text: 'синій', id: 2},
{text: 'червоний', id: 3},
{text: 'зелений', id: 4}
]
},
{
question: 'Якому році 2 світова',
rightAnswerId: 3,
id: 2,
answers: [
{text: '1954', id: 1},
{text: '1948', id: 2},
{text: '1949', id: 3},
{text: '1918', id: 4}
]
}
],}
)
const onAnswerClickHandler = answerId => {
console.log('Answer Id: ', answerId);
setState(state.activeQuestion + 1)
}
return(
<div className={classes.Quiz}>
<div className={classes.QuizWraper}>
<h1> Дайте відповідь на всі Питання </h1>
<ActiveQuiz
answers={state.quiz[state.activeQuestion].answers}
question={state.quiz[state.activeQuestion].question}
onAnswerClick={onAnswerClickHandler}
quizLength={state.quiz.length}
answerNumber={state.activeQuestion + 1}
/>
</div>
</div>
)
}
in your code, with onAnswerClickHandler you are changing the shape of your state. Your state is an object and holds different values.
const onAnswerClickHandler = answerId => {
console.log('Answer Id: ', answerId);
setState(state.activeQuestion + 1)
}
in here you are changing your state to a number:
state = {object stuff here}//
//after you call the function
state = 0 + 1 // all the other stuff is gone
as @cybercoder commented, you should use spread operator:
setState(prev=>({...state, activeQuestion : prev.activeQuestion + 1})) –
with spread operator, you copy all the data that your object contains and you only update the necessary value that you want to update