App Lab — Part 6

React Events and State

Read the following articles and follow the examples:

Hints: Passing Information

Take a look at the Codepen, where we implement a simple button component that increments a counter component.

In this example, we have a button that increments a counter. Our app has a total of 3 components (and some CSS because I’m tired of things looking ugly)

1. <App />:

  • buttonWasClicked() —our event handler, one task, update (this.setState) the key value of count in state by 1
  • render() — return a div with a className of App, render two components (<Button /> and <Counter />) and pass in on...event with a prop to the <Button /> component.

2. <Button />— consume the this.props.onClick prop passed down to it from <App />

3. <Counter /> — consume the this.props.count prop passed down to it from <App />

Homework

For next Wednesday lab, create a simple interface, with two buttons. One that increments a counter, and another that decrements the counter. Style your buttons with some CSS.

Push your code to GitHub the #lab-9 channel by Wednesday, November 14.