ComponentDidMount react native state

Question

My code:

   componentDidMount() {
       this.getEmail;
       console.log("checkpoint")
   }

   getEmail = () => {
       var email="something";
       this.setState({
           email: email,
       });
       console.log(this.state.email)
  }
  render() {
    return (
          <View>
            <Text style={styles.text} onPress={this.getEmail}>email :{this.state.email}</Text>
          </View>
    );
  }

Console.logs :

//nothing happened?
checkpoint
(onPress Text into JSX)
this.state.email
something

So my function works well but ComponentDidMount doesn't execute getEmail, but if i press "email :" this load my state and all is fine.

I would like that ComponentDidMount execute my function

nevermind it's in my code, you can call getEmail (onPress={this.getEmail} work well) — Thibaut Chazalon, Oct 23 '18 at 13:07
`this.getEmail()` and not `this.getEmail` in `componentDidMount` and your code is great :) — Ajay Gaur, Oct 23 '18 at 13:11

score 1 · Answer 1 · answered Oct 23 '18 at 13:13

1

componentDidMount() {
    this.getEmail();
    console.log("checkpoint")
}

Of course, onPress={this.getEmail} is executed when you press the text, but that's because onPress event listener make this.getEmail into this.getEmail()

answered Oct 23 '18 at 13:13

ZeroCho

1,358
10
23

score 1 · Answer 2 · answered Oct 23 '18 at 13:13

1

You need to change componentDidMount function:

componentDidMount() {
       this.getEmail();
       console.log("checkpoint")
   }

and tell me if it's what you looking for...

answered Oct 23 '18 at 13:13

Idan

3,604
1
28
33

Maor Refaeli · Answer 3 · 2018-10-23T13:19:29.707

You need to invoke getEmail:

componentDidMount() {
    this.getEmail();  // () is added here
    console.log("checkpoint")
}

Also, you wrote:

getEmail = () => {
   var email="something";
   this.setState({
       email: email,
   });
   console.log(this.state.email)
}

which is wrong. setState is asynchronous and this.state.email might not be there when you log it (take a look on When to use React setState callback). To fix this you should write:

getEmail = () => {
   var email="something";
   this.setState({
       email: email,
   }, () => console.log(this.state.email));
}

ComponentDidMount react native state

3 Answers3