3 ways to Avoid 'This' error

by Allie Yu

Babel + JSX

//Constructor with Bind method
class Car {
	constructor(){
  	this.drive = this.drive.bind(this);
    //bind() method creates new function, when called, 'this' keyword set to the provided value
  }
	setDriveSound(sound){
  	this.sound = sound;
  }

  drive(){
  	return this.sound; // 'this' will be instance by the car class
  }
}

// => 
class SearchBar extends React.Component{
	state = { term : ''};
  
  onFormSubmit = event =>{
  	event.preventDefault(); //prevent submit when user click enter, https://jsfiddle.net/api/mdn/
    console.log(this.state.term);
  }
  
  render(){
  	return (
    	<div className='ui segment'>
    	  <form onSubmit={this.onFormSubmit} className='ui form'>
    	    <div className = "field">
    	      <label>Image Search</label>
            <input 
              type="text" 
              value={this.state.term} //assign input to value prop,value prop will overwrite text is already inside of input.
              onChange = { e => this.setState ({ term: e.target.value.toUpperCase()})}
              //the callback --> take that event object.
              //this.state.term is going to contain whatever the user just typed in.
            />
    	    </div>
    	  </form>
    	</div>
    );
  }
}

//change inline event
class SearchBar2 extends React.Component{
	state = { term : ''};
  
  onFormSubmit (event) {
  	event.preventDefault(); //prevent submit when user click enter, https://jsfiddle.net/api/mdn/
    console.log(this.state.term)
  }
  
  render(){
  	return (
    	<div className='ui segment'>
    	  <form onSubmit={event => this.onFormSubmit(event)} className='ui form'>
    	    <div className = "field">
    	      <label>Image Search</label>
            <input 
              type="text" 
              value={this.state.term} //assign input to value prop,value prop will overwrite text is already inside of input.
              onChange = { e => this.setState ({ term: e.target.value.toUpperCase()})}
              //the callback -->...