Published Oct 26 2020
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
})
I wrote an entire book on this topic 👇
© 2023 Flavio Copes
using
Notion to Site.
Follow on Twitter
Solopreneur? Wannabe? Adventure awaits