Cannot read property 'props' of null - Reactjs

Question

Basically i want to call a function from parent component in child component. That function will change parent component's state.

I have created a handler in parent and passed it as prop to child component. Now i want to call it in child component.

Parent:

  state = { formstep: '1'}
  constructor(props) {
  super(props)
    this.handler = this.handler.bind(this)
  }
  handler(e) {
    e.preventDefault()
    this.setState({
      formstep: '2'
    })
 }

 render () {
    return (
      <Form1 handler = {this.handler} />
    )
 }

And in child when I try to call handler function it says

Cannot read property 'props' of null

Child:

handleClick() {
   //Saving Some data from form
   //and calling parent function
   this.props.handler;
}

render () {
    return (
      <button onClick={this.handleClick}>Continue</button>
    )
}

bind issue in the child onClick function, search on google will result in numerous duplicates for this question — Shubham Khatri, Sep 18 '17 at 11:20

score 1 · Accepted Answer · answered Sep 18 '17 at 11:19

In child component you need to bind context properly:

<button onClick={this.handleClick.bind(this)}>Continue</button>

or better to bind in constructor:

this.handleClick = this.handleClick.bind(this)
// => <button onClick={this.handleClick}>Continue</button>

or call it as a method:

<button onClick={() => this.handleClick()}>Continue</button>

Finally, you need to actually call your callback:

handleClick() {
   this.props.handler();
   //     note ------^
}

` ` This with `()` worked like a charm. Thanks :) – Noman Ali Sep 18 '17 at 11:25 — Noman Ali, Sep 18 '17 at 11:25

Cannot read property 'props' of null - Reactjs

1 Answers1

Linked