CODEWITHSUNDEEP
javascriptreactjs
user6761897
user6761897

Reputation:

Uncaught TypeError: Cannot read property 'props' of null in React

This is my child component that needs to pass data up to its parent.

class Sidebar extends React.Component {

  getUserInput(event){
    event.preventDefault();
    let value = document.getElementById('input-button').value;
    console.log(value);
    this.props.handleSubmit(value);
  }


  render() {
    return (
      <div>
          <input type="text" id="input-button" placeholder="YGUID" />

            <button type="button" className="btn btn-info btn-icons" onClick={this.getUserInput} />

      </div>
    );

  }
}

Sidebar.propTypes = {
  handleSubmit: React.PropTypes.func
};

This is where the parent is calling handleSubmit.

......
handleSubmit(data){
    console.log(data);
  }
  render(){
    return(
        <div className="col-md-2 left-pane">
          <Sidebar handleSubmit= {this.handleSubmit}/>
        </div>

    );
  }

I get the following error.

Uncaught TypeError: Cannot read property 'props' of null

What am I doing wrong here.

Upvotes: 0

Views: 6061

Answers (1)

madox2
madox2

Reputation: 51871

this.getUserInput function passed to the Sidebar props is not bound to the correct context (this) when it is called. You can for example bind it:

<Sidebar handleSubmit={this.handleSubmit.bind(this)}/>

There are also other options how to sovle this. For example using arrow functions which has lexical this, binding methods in constructor or using class properties to define methods with arrow functions (ES7).

Upvotes: 1

Related Questions