Mutating state

[pobch]

I think you are mutating the state at the following lines:

full-stack-serverless-code/graphql/src/App.js

Lines 83 to 84 in 44c4eb2

	const notes = [...state.notes]
	notes[index].completed = !note.completed

Since each note is an object, setting notes[index].completed property is mutating the note object. Instead, we should create a new note object like this:

const notes = [...state.notes]
notes[index] = { ...state.notes[index], completed: !note.completed }

[ibqn]

I also did not like the way notes were updated.

My solution was to use map to obtain an updated copy of notes, i.e.

let completed = undefined
const notes = state.notes.map((note) => {
 if (note.id === id) {
 completed = !note.completed
 return { ...note, completed }
 }
 return note
 })

Thus, the complete updateNote function looks

 const updateNote = async ({ id }) => {
 let completed = undefined

 const notes = state.notes.map((note) => {
 if (note.id === id) {
 completed = !note.completed
 return { ...note, completed }
 }
 return note
 })

 try {
 await API.graphql({
 query: UPDATE_NOTE,
 variables: {
 input: { id, completed },
 },
 })
 console.log('successfully updated note')
 } catch (error) {
 console.log('error: ', error)
 }

 dispatch({ type: 'SET_NOTES', notes })
 }

The entire example can be found here, if some one is interested.