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 re-render.

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
})

Lessons in this unit:

0:	Introduction
1:	Introduction to React Hooks
2:	How to use the useState React hook
3:	useEffect React hook, how to use
4:	How to use the useContext React hook
5:	How to use the useReducer React hook
6:	How to use the useCallback React hook
7:	How to use the useMemo React hook
8:	How to use the useRef React hook
9:	Can I use React hooks inside a conditional?
10:	Why does useEffect run two times?
11:	▶︎ Using useState with an object: how to update
12:	How to reference a DOM element in React