Is saying event handler the same as saying state-changing method?


#1

Question

Is saying event handler the same as saying state-changing method?

Answer

Not quite. They can be related but they are not the same. When we talk about event handlers, it sometimes involves an HTML element that directly interacts with the user, like a button or an input form, but it can also be a JavaScript function that checks for a specific interaction with or from the page, like a keyboard key press, a page load, page scroll, or leaving a page. For Example:
let’s say we have a button:

...
render(){
  return(
    <div>
      <button> click me! </button>
    </div>
  )
}

Now, because we want something to happen we attach an event handler, which is a method that will track every time the button is clicked:

...
checkClick(e){ // because in React an onClick attribute 
  //provides us with an event object, we will console.log it
  console.log( " button has been click, and this is the event object:", e);
}

render(){
  return(
    <div>
      <button onClick= { this.checkClick }> click me! </button> 
    </div>
  )
}

With the addition of the method in the onClick attribute, we have created an event listener, that method is now connected to the button and it will be trigger every time the button is clicked thus console logging the message and the event object.

Talking about a state-changing method can only involve a change of state from within the app and it could also be a response to another method being called. It relates to event handlers because React is user center, being a front-end library, it is meant to relate to the interaction with the window and the components. For example:

...
class App extends Component {
  constructor(){
    this.state = {
      counter: 0
    };
    this.updateCounter = this.updateCounter.bind(this);
    this.counterCaller = this.counterCaller.bind(this);
  }
  
  updateCounter(){  //we are creating a method that will update our state
    newNum = counter++; //we will increase the number by one
    this.setState({
      counter: newNum
    });

  }

  counterCaller(){
    while(this.state.counter < 30){ // we want to loop until counter is 30
      setTimeout( this.updateCounter(), 2000); //if it is less that 30 it will be called each two seconds
      console.log("counter is: ", this.state.counter);
    }
    if(this.state.counter === 30){
      console.log( "Counter ended at 30. counter reset!" ); //once it is 30 we will reset it
      this.setState({
        counter: 0
      });
    }
  }
  
  componentDidMount(){ //calling a method from React that checks if the component 
  //was rendered. 
  //we will take advantage of it and use it to call our method:
    this.counterCaller();
  }

  render(){
    return <p> {this.state.counter} </p>;
  }
...

In the last example we created some state that we decided to update (change), based on time and an amount condition, the state-changing methods only interact with one another and they are called by another method. We are not handling any events with the exception of the rendering of the component itself. With this we can conclude that event handlers and state-changing methods are not the same but can be related, since one can trigger the other.