title: How to render data in react getting undefined state?
body: <p>I am fetching data inside componentDidMount but i get undefined during initial render and again render happens and during that time the state variable gets populated. Now when it is not undefined and after population I want to destructure it and display the data inside my component.  </p>
  
  <p>Note: getProjectDetails() makes a GET req to populate the data.</p>
  
  <p>I am getting typer error name of undefined.</p>
  
  <pre><code>  constructor(props) {
              super(props);
              this.state = {
                 projectDetails: ''
              };
          }
  
      componentDidMount() {
              getProjectDetails(this.props.logged_in_user, this.props.projectId)
                  .then( res =&gt; {
                      this.setState({projectDetails: res});
                  })
                  .catch(err =&gt; {
                      console.log('Error: ' + err);
                  })
          }
  
      //Inside render()
  
      render() {
              console.log('Project details from API endpoint: ', this.state.projectDetails.project)
  
              const { projectDetails } = this.state;
              console.log('Destructure: ', projectDetails);
  
              const project = this.state.projectDetails.project;
  
      let {  
                  name,
                  location,
                  city,
                  builder_name } = project;
  </code></pre>