React User Events and Lifecycle

Day Three

React event handling

HTML:

<button class='my-rad-button'>Click me!</button>

JS:

const handleButtonClick = (event) => {
    console.log("button was clicked")
}

document
    .querySelector('.my-rad-button')
    .addEventListener('click', handleButtonClick)

React way:

  handleButtonClick = (event) => {
    console.log("button was clicked")
  }

  render() {
    return (
      <div>
        <button onClick={this.handleButtonClick} >Click me!</button>
      </div>
    );
  }
}
  • In react we place the handle
  • onClick
  • onChange
  • onSubmit
  • preventDefault
React Lifecycle
Today's work