Using useState with an object: how to update

🆕 🔜 Check this out if you dream of running a solo Internet business 🏖️

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

The same technique can be used to remove a property:

const copyOfObject = { ...quizAnswers }
delete copyOfObject['propertyToRemove']