CODEWITHSUNDEEP
javascriptreactjspropertiesundefined
Jeffrey Fortune
Jeffrey Fortune

Reputation: 21

React Error annot read property 'onChange' of undefined

React Error cannot read property 'onChange' of undefined The app class is calling for a map of Breakpoint components

 <Breakpoints  key={breakpoint.key}
           name={breakpoint.name}
           minWidth={breakpoint.minWidth}
           onChange={function () {   // this is where react says my error is
           this.onChange(breakpoint)
           }.bind(this)}/>

this is the parent method

`onChange(breakpoint) {
    this.props.breakpoints[breakpoint.key].name = name;
    this.state (this.state);
    console.log(breakpoint)
 }`

these are the child elements

<input type="text" name="name" defaultValue={this.state.name}  onBlur={this.onChange}/>
<input type="text" name="minWidth" defaultValue={this.state.minWidth} onBlur={this.onChange}/>

this is how I am watching and trying to update the code

onChange(e) {
    e.preventDefault();
    this.setState(
      {[e.target.name]: e.target.value},
      function () {
        console.log(this.state.name);
        this.props.onChange({
          key: this.state.key,
          name: this.state.name,
          minWidth: this.state.minWidth
        });
      }
    );
    }

Upvotes: 2

Views: 3479

Answers (1)

Drew Schuster
Drew Schuster

Reputation: 2691

The failure is in that last code snippet I believe, see the commented line I added:

onChange(e) {
e.preventDefault();
this.setState(
  {[e.target.name]: e.target.value},
  function () {
    // HERE: "this" is newly created for this function, so this.props is undefined, so this.props.onChange fires an error
    console.log(this.state.name);
    this.props.onChange({
      key: this.state.key,
      name: this.state.name,
      minWidth: this.state.minWidth
    });
  }
);
}

The fix is either wrapping that function in a bind as well, or using es2015 fat arrow functions which would require babel transpiling or the user to use only modern browsers. You could also use the var self = this trick, like so. Here are the three options:

// bind
onChange(e) {
e.preventDefault();
this.setState(
  {[e.target.name]: e.target.value},
  function () {
    console.log(this.state.name);
    this.props.onChange({
      key: this.state.key,
      name: this.state.name,
      minWidth: this.state.minWidth
    }.bind(this));
  }
);
}
// es2015 arrow functions
onChange(e) {
e.preventDefault();
this.setState(
  {[e.target.name]: e.target.value},
  () => {
    console.log(this.state.name);
    this.props.onChange({
      key: this.state.key,
      name: this.state.name,
      minWidth: this.state.minWidth
    });
  }
);
}
// self trick
onChange(e) {
e.preventDefault();
var self = this;
this.setState(
  {[e.target.name]: e.target.value},
  function () {
    console.log(self.state.name);
    self.props.onChange({
      key: self.state.key,
      name: self.state.name,
      minWidth: self.state.minWidth
    });
  }
);
}

Upvotes: 1

Related Questions