Access this variable in render method [REACT NATIVE]

Question

I'm facing an issue trying to render a class variable.

import Api from '../services/Api';
class Boxify extends Component {
  constructor(props) {
    super(props);
  }
  async componentWillMount() {
    this.response = await Api.getUserCurrent();
    this.mail = this.response.data.email;
    alert(this.mail);
  }
  render() {
    return (
      <View>
        <Text>
          {this.mail}
        </Text>
      </View>
    )
  }
}
export default Boxify;

What I can't figure out is why does the alert in the componentWillMount shows me the email_adress, and the render doesn't show anything ?

Because when the component is first rendered, this.mail is undefined. And since you aren't calling setState() / using this.state like you're supposed to, render() isn't called again. Either make mail part of the component's state, or force a re-rendering. — user5734311
– user5734311, Commented May 30, 2018 at 13:52

Bruno Mazzardo · Accepted Answer · 2018-05-30 13:54:25Z

3

Try using state instead of a local variable, so the component will render again

import Api from '../services/Api';
class Boxify extends Component {
  constructor(props) {
    super(props);
    this.state = {
     mail : ''
   }
  }
  async componentDidMount() {
    this.response = await Api.getUserCurrent();
    this.setState({
         mail : this.response.data.email;
     })
  }
  render() {
    return (
      <View>
        <Text>
          {this.state.mail}
        </Text>
      </View>
    )
  }
}
export default Boxify;

answered May 30, 2018 at 13:54

Bruno Mazzardo

1,5861 gold badge15 silver badges27 bronze badges

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

3 Comments

aravind_reddy Over a year ago

either change the state variable to mail or use data instead of mail in render and set state of componentDidMount

Bruno Mazzardo Over a year ago

yeah, fixed my typo sorry.

WaLinke Over a year ago

Worked ! Thanks mates.

Collectives™ on Stack Overflow

Access this variable in render method [REACT NATIVE]

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related