title: React.js this.props undefined unless page is refreshed
body: <p>So, I have the following problem, I'm trying to show all the posts the user has made in the user's profile. If I start from log in and go to the profile it gives me the error that this.props.user[0].id is undefined. However, if I refresh the page (sometimes twice), it works perfectly.</p>
  <p>I have search online and I only see cases that are opposite (props undefined when refreshing) and I could not find a solution.</p>
  <p>This is my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from "react";
  import axios from "axios";
  import { Card, CardBody, CardTitle, CardText} from "reactstrap";
  import Withuser from "./Withuser"
  
  class Profile extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        thoughts: []
      }
    }
  
    componentDidMount = () =&gt; {
      this.getShares()
    }
  
    getShares = () =&gt; {
      const user_id = this.props.user[0].id
      console.log(this.props.user[0].id)
  
      axios(`http://localhost:7001/api/profile/shares/${user_id}`)
  
      .then(res =&gt; {
        console.log(res.data)
        this.setState(state =&gt; ({
          thoughts: res.data,
          loggedIn: !state.loggedIn
        }))
      })
      .catch(error =&gt; {
        this.setState({ error: true })
      })
    }
  
    render() {
      const { thoughts } = this.state
      return(
      &lt;div&gt;
        &lt;h1&gt;Your posts&lt;/h1&gt;
        &lt;ul&gt;
          {thoughts.map((thought, index) =&gt; {
            return (
              &lt;Card className='thoughts' key={index}&gt;
                &lt;CardBody&gt;
                  &lt;CardTitle&gt;{thought.user_name} posted at {thought.createdAt}&lt;/CardTitle&gt;
                  &lt;CardText&gt;{thought.body}&lt;/CardText&gt;
                &lt;/CardBody&gt;
              &lt;/Card&gt;
            )
          })}
        &lt;/ul&gt;
      &lt;/div&gt;
      )
    }
  }
  
  
  export default Withuser(Profile, { renderNull: true });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Withuser component:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useState, useEffect } from 'react'
  import axios from 'axios'
  
  const withUser = (Component, options = { renderNull: true }) =&gt; props =&gt; {
    const [userData, setUserData] = useState(null)
    const [userId, setUserId] = useState(null)
    const [error, setError] = useState(false)
  
    useEffect(() =&gt; {
      const token = localStorage.getItem('token')
      if (!token) return
      axios('http://localhost:7001/api/profile', {
        headers: {
          'x-access-token': token,
        },
      })
        .then(response =&gt; {
          const id = response.data.id
          setUserId(id)
        })
        .catch(error =&gt; {
          setError(true)
          console.log(error)
        })
    }, [])
  
    useEffect(() =&gt; {
      axios(`http://localhost:7001/api/users/${userId}`)
        .then(response =&gt; {
        
        setUserData(response.data)
      })
    }, [userId])
  
    if (!userData &amp;&amp; options.renderNull) return null
    return &lt;Component {...props} user={userData} /&gt;
  }
  
  export default withUser</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>This is the console when refreshing:
  <a href="https://i.stack.imgur.com/p4Ngi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p4Ngi.png" alt="enter image description here" /></a></p>
  <p>Can you see where the error can be?</p>
  <p>Any help will be appreciated :)</p>