Day 64: React Course on Udemy

React Events

  1. Event handlers are functions that run whenever an event occurs.
  2. Event handling with React elements is similar to handling events with DOM elements, minus some syntactic differences.
  3. React events are named using camel case and not lower case.
  4. With JSX, you pass a function as the event handler rather than a string.
  5. When naming functions for event handlers i.e. handleButtonEdit:

    • Function names typically begin with "on" or "handle"
    • Name the DOM element i.e. Button
    • Describe the expected function
// curly braces will evaluate our JavaScript function
class Note extends React.Component {

    // handleButtonEdit function
    handleButtonEdit() {
      alert("this function will edit a note");
    }

    // handleButtonDelete function
    handleButtonDelete() {
      alert("this function will delete a note");
    }
  render() {
    // event handler = onClick
    // functions to be evaluated in our JSX (handleButtonEdit and handleButtonDelete)
    // we want our event handlers in our render method to have access to all functions/methods created within Note component
    // in order to do this, we add "this" keyword in front of our functions
    return(
      <div>
        <h1>Useless Note Taker</h1>
        <button onClick={this.handleButtonEdit}>Edit Note</button>
        <button onClick={this.handleButtonDelete}>Delete Note</button>
      </div>
    );
  }
}

ReactDOM.render(
  <Note />,
  document.getElementById("app")
);