CODEWITHSUNDEEP
javascripthtmlreactjs
lukeet
lukeet

Reputation: 511

How do I make elements render upon loading the page when using conditional rendering?

At the moment my elements only render upon hard reset I think its because on load my state is set to Null, IDK how to make it so that my divs are stored what's the easiest/best way?

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

    componentDidMount() {
        this.state.healthData = JSON.parse(localStorage.getItem('user_data'))
    }


    render() {
        //gets users data and renders it to <p> items
        const healthData = this.state.healthData;
        console.log(healthData);
        return healthData == null ? "" : (
            <div className='main_Main'>
                <div className='meal_divs'>
                    <p className='food_heading'>Status:</p>
                    <p className='food_text'>Your age is: {this.state.healthData.age}</p>
                    <p className='food_text'>Your gender is: {healthData.gender}</p>
                    <p className='food_text'>Your goal is: {healthData.goal}</p>
                    <p className='food_text'>Your height is: {healthData.height}</p>
                    <p className='food_text'>your weight is: {healthData.weight}</p>
                </div>

please help

Update: seems to be error with login/signout upon logout user_data and user are moved from local storage then readded upon signing, this is my app once signed in you can see the console logs and the fact that there's nothing wrong with my router.(ignore horrible/broken styles I haven't styled it yet) page straight after login Page after login and hard reset

conditional rendering on router:

  {this.state.user ? (
      < Switch >
        <Route path='/setup_page' component={setup_page} exact />,
        <Route path='/settings_page' component={settings_page} exact />,
        <Route path='/' component={Main_page} />
      </Switch>
    ) : (<Login_page/>)}

Upvotes: 1

Views: 78

Answers (3)

user2063635
user2063635

Reputation: 214

You are directly mutating the state in your componentDidMount method. This is not intended in react. Instead, you set the state using setState method and the component shall re-render.

 componentDidMount() {
    this.setstate({healthData : JSON.parse(localStorage.getItem('user_data'))})
}

In your render method, you can use object destructing to hold your state health data like below and edit the following code in conditional rendering as below - 

const { healthData } = this.state;
return(
  <div className='main_Main'>
       <div className='meal_divs'>
   {
      healthData === null ? "" : 
      (
          <p className='food_heading'>Status:</p>
          <p className='food_text'>Your age is: {healthData.age}</p>
          <p className='food_text'>Your gender is: {healthData.gender}</p>
          <p className='food_text'>Your goal is: {healthData.goal}</p>
          <p className='food_text'>Your height is: {healthData.height}</p>
          <p className='food_text'>your weight is: {healthData.weight}</p>
       )
    }
 </div>
 </div>

Upvotes: 0

Danko
Danko

Reputation: 1864

Try this: 

componentDidMount() {
  this.setState({healthData: JSON.parse(localStorage.getItem('user_data'))})
}

React doesn't know that state is updated and component should be re-rendered if you are not using setState.

Upvotes: 2

segFault
segFault

Reputation: 4054

You have a few things that could be causing issues.

  1. You are not using setState() in your componentDidMount()
componentDidMount() {
    this.setState({ 
        healthData: JSON.parse(localStorage.getItem('user_data'))
    });
}
  1. You could benefit from using the syntax healthData && <div /> in your render()
render() {
    //gets users data and renders it to <p> items
    const healthData = this.state.healthData;
    return healthData && <div className='main_Main'>...</div>;
}

Upvotes: 1

Related Questions