title: Accessing Props after render in multi level component tree - React
body: <p>I'm somewhat new with React and am running into an issue where I am getting undefined props in components, child components and grandchild.  </p>
  
  <p>Here's what I have going on... </p>
  
  <p>app.jsx</p>
  
  <pre><code>constructor(props) {
    super(props);
    this.state = {
      entities: [],
    }
  }
  
  componentDidMount() {
    axios.get(`api.com`)
    .then(response =&gt; {this.setState({entities: response,})});
  }
  
  render() {
    return (
      &lt;div&gt;
        &lt;Component entities={this.state.entities} /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>From my understanding, once the component has mounted, it executes the axios call, and sets state.  I am then passing the state.entities into the Component.</p>
  
  <p>I then need to access the props prior to the Component rendering, so am I doing that in componentWillMount(), and then setting the Component state to pass down as props to a ChildComponent? </p>
  
  <pre><code>componentWillMount() {
      var getEntities = this.props.entities
      this.setState({entities:getEntities})
    }
  
  render() {
    return (
      &lt;div&gt;
        &lt;ChildComponent entities={this.state.entities} /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>In the end, my issue is in my ChildComponent, or GrandChildComponent everything is rendering prior to and props or state being set.  So when I call {entities.id} I get an undefined. </p>
  
  <p>Maybe I'm just dumb? </p>