Using useState with an object: how to update
New Course Coming Soon:
Get Really Good at Git
When a state variable defined with useState is an object with properties you add / update, it’s somewhat confusing how to update it.
You can’t just update the object, or the component won’t rerender.
A pattern I found involves creating a temporary object with one property, and use object destructuring to create a new object from the existing 2 objects:
const [quizAnswers, setQuizAnswers] = useState({})
...
const updatedValue = {}
updatedValue[quizEntryIndex] = answerIndex
setQuizAnswers({
...quizAnswers,
...updatedValue
})
The same technique can be used to remove a property:
const copyOfObject = { ...quizAnswers }
delete copyOfObject['propertyToRemove']
setQuizAnswers({
...copyOfObject
})
→ Get my React Beginner's Handbook
→ Read my full
React Tutorial
on The Valley of Code
Here is how can I help you:
- COURSES where I teach everything I know
- CODING BOOTCAMP cohort course - next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- Follow me on X