Using useState with an object: how to update
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
I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
- C Handbook
- Command Line Handbook
- CSS Handbook
- Express Handbook
- Git Cheat Sheet
- Go Handbook
- HTML Handbook
- JS Handbook
- Laravel Handbook
- Next.js Handbook
- Node.js Handbook
- PHP Handbook
- Python Handbook
- React Handbook
- SQL Handbook
- Svelte Handbook
- Swift Handbook
JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025