Cannot read property 'props' of undefined error

Question

I'm trying to child to parent communication so, i'm using props. There's have a little problem. I get an error when I use the StatusChanged() function.

There is my parent (App.JS) file:

class App extends Component {

  constructor(props) {
    super(props);
    this.state = { trackingStatus: true };
  }

  trackingStatusUpdate(data)
  {
      console.log(data);
  }

  render() {
    return (
      <div className="App">
        <Switcher trackingStatus={this.state.trackingStatus} trackingStatusUpdate={this.trackingStatusUpdate} />
      </div>
    );
  }
}

And There is my child (Switcher.JS) file:

class Switcher extends Component {


    constructor(props) {
        super(props);
        this.state = {
            trackingStatus: this.props.trackingStatus
        };
    }   


    statusChanged()
    {
        this.props.trackingStatusUpdate(this.state.trackingStatus);
    }

    render() {
        return (
            <div>
                <h3>Tracking Mode</h3>
                <label className="switch">
                  <input type="checkbox" defaultChecked={this.state.trackingStatus} onChange={this.statusChanged}  id="switch"  />
                  <div className="slider round"></div>
                </label>
            </div>
        );
    }

}

Switcher.defaultProps = {
    trackingStatus: true
}

What is the problem?

Thank you.

Embed your code in the question instead of giving a link to it. — Shammel Lee, Jun 03 '17 at 21:08
Possible duplicate of [Unable to access React instance (this) inside event handler](https://stackoverflow.com/questions/29577977/unable-to-access-react-instance-this-inside-event-handler) — Andrew Li, Jun 03 '17 at 21:09
@Rys It *is* the same. The answer is the same and the reason is to. Please read it thoroughly. — Andrew Li, Jun 03 '17 at 21:19

score 1 · Accepted Answer · answered Jun 03 '17 at 21:18

1

You need to bind the trackingStatusUpdate() and statusChanged() class methods…

class App extends Component{
  constructor(props){
    super(props);
    this.state = {trackingStatus: true};

    this.trackingStatusUpdate = this.trackingStatusUpdate.bind(this);
  }

  ...
}

class Switcher extends Component{
  constructor(props){
    super(props);
    this.state = {trackingStatus: this.props.trackingStatus};

    this.statusChanged = this.statusChanged.bind(this);
  }

  ...
}

answered Jun 03 '17 at 21:18

Shammel Lee

4,092
1
17
20

Thank you so much! – Rys Jun 03 '17 at 22:02
@Rys my pleasure. Glad I could help :) – Shammel Lee Jun 03 '17 at 22:07

Cannot read property 'props' of undefined error

1 Answers1