Note: do not update state directly - mutating the state directly will now allow React to know that state actually changed.

1. Pass setState() a function, which will receive the previous state as a first argument:

this.setState((prevState) => ({
 count: prevState.count + 1
}))

object returned from a function will be merged with the previous(current) state, and create a new state.

Pass setState() and object when the new state DEPENDS on the previous state.

2. Pass serState() an object:

this.setState({
  userName: 'Tyler'
})

object will be merged with the previous(current) state, and create anew state.

Use functional setState() when the new state DOES NOT DEPEND on the previous state.

when setState() invoked, React, by default will re-render the entire application and update the UI.

• the state we want to modify, contacts state is living inside the App.js file (inside the App component)
• delete button is living inside the ContactList.js file (inside ContactList component)

1.

Inside an App component, we create a function (removeContact()) which will be invoked each time when delete button is clicked, and will be responsible for updating our state.

removeContact = (contact) => {
this.setState((state) => ({
  ...
}))
}

2.

In order to access the removeContact() function, created in the App component from the ContactList component we:

• add (in the App.js file) a new property/attribute for the ContactList component (<ContactList onDeleteContact={ } />)
• pass our removeContact() function as a value to the onDeleteContact property of ListContacts component

<ContactList onDeleteContact={this.removeContact} />

3.

We hook our onDeleteContact prop to the delete button in the ListContcats component

<button onClick={() => this.props.onDeleteContcat(contcat) }>
</button>

4.

When the delete button is clicked, it will be passed a specific contact from our contacts array (depending on which contact is clicked, of course)

5.

And that clicked contact (which is clicked on to be deleted) will appear as an argument to onDeleteContact function in App.js file, so the onDeleteContact function will be invoked and update the curent state:

• use the setState method, which will be passed a function, with current state as an argument
• filter out state.contacts based on the ids of the contact which was clicked and other contacts' ids (which were not clicked and should stay in the array)
• using setState method will re-render the application and merge the previous state with the new one

removeContact = (contact) => {
this.setState((state) => ({
  contacts: state.contacts.filter((c) => c.id !== contact.id)
}))
}

• when setState() called, component calls render() with a new state
• state updates can be asyncronous (setState() can accept a function with a previous state as it's first argument )