09-events-and-state.md

React - events and state

Handling Events

1. Create a <Contact> component that can be provided two props:

   • the contact's name; and
   • the contact's address, to be rendered using your <Address> component.

2. Update your <Contact> component to handle click events. When the event happens, the component should (for the moment) simply display an alert.

Updating State

Our <Contact> component is nice, but what we'd really like is an 'expandable' <Contact>:

Unexpanded state:

Expanded state:

1. Update your <Contact> to handle the two states. Don't worry about the fancy graphics - get it working. :-) One way to do this is to have an isExpanded state value that you update when you click it.

Resources

• A contacts.json you can use

---

[Solution]