how to access state variable in componentDidMount in reactjs

Question

"TypeError: Cannot read property 'state' of null" the above error message is what i get.... following is my code

constructor(props) {
  super(props)
  this.state = {
    desc: '',
  }
}

componentDidMount = () => {
  var ref = fire.database().ref("Employers/Employer1");
  ref.orderByKey().on("child_added", function(snapshot) {

    this.setState({
      desc: snapshot.val()
    })
    console.log('====================================');
    console.log(this.state.desc);
    console.log(snapshot.val().Description);
    console.log('====================================');
  });

  // snapshot.val() is the dictionary with all your keys/values from the '/store' path


}

Umair Farooq · Accepted Answer · 2019-01-22 05:47:20Z

4

This is because of this behavior in javascript. There are two ways to solve it. First to use arrow function, change third line to

ref.orderByKey().on("child_added", (snapshot) => {

other way is to assign value of this to another variable and use state by using that variable. forexample

const self = this;
ref.orderByKey().on("child_added", function(snapshot) {

    this.setState({ desc: snapshot.val() })
    console.log('====================================');
    console.log(self.state.desc);
    console.log(snapshot.val().Description);
    console.log('====================================');
});

For understanding this you can read this article

answered Jan 22, 2019 at 5:47

Umair Farooq

1,8331 gold badge14 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Umair Farooq Over a year ago

If you are satisfied with answer please accept and vote answer

Praveen Rao Chavan.G · Accepted Answer · 2019-01-22 05:54:38Z

2

componentDidMount is a life cycle hook, it need not be an arrow function.

change

componentDidMount = () => {
}

To

componentDidMount(){
}

edited Jan 22, 2019 at 5:54

answered Jan 22, 2019 at 5:53

Praveen Rao Chavan.G

2,8803 gold badges24 silver badges37 bronze badges

Collectives™ on Stack Overflow

how to access state variable in componentDidMount in reactjs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related