title: Unable to pass props to child Component from Parent Component
body: <p>Here is my parent component Search.js</p>
  <pre><code>class Search extends Component {
  state = {
      hcps: [],
  }
  
  componentDidMount() {
      this.fetchingData();
  }
  
  fetchingData = () =&gt; {
      axios.get('/hcp-overview-panel')
      .then(res =&gt; {
          const hcps = res.data;
          console.log('data from fetch: ', hcps)
          this.setState({hcps: hcps},()=&gt;{console.log('state after state: ',this.state)})
      })
      .catch(error =&gt; console.error(`Error: $(error)`));
  }
  
  render() {
      console.log('State: ',this.state);
      return(
           &lt;div&gt;
             &lt;Name hcps={this.state.hcps} /&gt;
           &lt;/div&gt;
           )}
  </code></pre>
  <p>And this is my child component Name.js.</p>
  <pre><code>class Name extends Component {
  
  state = {
      hcpFromSearch: this.props.hcps,
      data: [28, 48, 40, 19],
      labels: [&quot;In Person Call&quot;, &quot;RTE&quot;, &quot;MobilePush&quot;, &quot;Speaker Program&quot;],
  };
   render() {
     console.log('from search:', this.props.hcps)
     return (
  &lt;div&gt;
   &lt;div&gt;
      &lt;h2 class=&quot;no-margins&quot;&gt;
         {this.state.hcpFromSearch.hcp_overview.name}
      &lt;/h2&gt;
    &lt;/div&gt;
  &lt;/div&gt;
     )}
  </code></pre>
  <p>This is the json.</p>
  <pre><code>   &quot;hcp_overview&quot; : {
              &quot;name&quot; : &quot;Martin Alan Menter, MD, FAAD&quot;,
              &quot;designation&quot;: &quot;snlam&quot;,
              &quot;specialty&quot;: &quot;sksn&quot;,
              &quot;top_affiliation&quot;: &quot;snksn&quot;,
              }
  </code></pre>
  <p>I'm getting this error in running this code: TypeError: Cannot read property 'name' of undefined.
  Basically, when I console.log, I'm getting an empty state and for some reason the axios request isn't getting done. Mind you, when I don't pass the Name component (that is just comment out that call to the Name component), I can fetch the data easily.
  I'm stuck on this for quite some time.</p>
  <p><a href="https://i.stack.imgur.com/Y0sMO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y0sMO.png" alt="enter image description here" /></a></p>
  <p>And this is the JSON when I comment out the Name component.</p>
  <p><a href="https://i.stack.imgur.com/C5s8x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C5s8x.png" alt="enter image description here" /></a></p>