0

I am learning React and I am currently having a hard time getting my data in the component.

The problem is I couldn't re-render my component after the data is loaded.

Here's my script:

 constructor(props) {
    super(props);
    this.state = {
      isFetched: false,
      profile: []
    }
  }

async componentDidMount() {
 let profile = await checkProfile();
 if(profile && !isEmpty(profile)) {
   this.state.profile = profile;
   this.state.isFetched = true;
 }
}

render() {
    return this.state.isFetched ? <HomeTPL {...this.props} /> : 'Loading data please wait...';
    // return <HomeTPL {...this.props} />
  }

I am stuck on this message Loading data please wait... even the data is already fetched.

rochellecanale
  • 83
  • 2
  • 12
  • 3
    Don't directly set state, instead call `this.setState({ profile, isFetched: true })` – Phil Sep 08 '22 at 03:23
  • Thanks @Phil for that, I'll update it. – rochellecanale Sep 08 '22 at 03:25
  • Wow, I can now see my component. Thank you!, I will accept this as an answer to my question. :) – rochellecanale Sep 08 '22 at 03:27
  • It's already closed as a duplicate so throw a few upvotes towards the linked question and answer. If you're just starting out with React, I'd recommend using [Function Components](https://reactjs.org/docs/components-and-props.html#function-and-class-components). It's the more modern approach and in my opinion, a lot easier to learn – Phil Sep 08 '22 at 03:29

0 Answers0