title: How to pass data to props from state?
body: <p>I'm learning React and have some troubles with using state and props. There is two files: App.js and component. In App.js i use axios to get JSON data from IP and store in a state. But I cannot pass the data to props through the state.
  Here is App.js:</p>
  
  <pre><code>import React from 'react';
  import axios from 'axios';
  import Shutruk from './Shutruk';
  
  const qwerty = {
    "data": [
        {
            "_id": "5d1cb18e4af03042df6267c5",
            "title": "Shutruk",
            "description": "Shhhhhhhhhhhhh",
            "date": "2019-07-03T13:45:50.850Z",
            "__v": 0
        },
        {
            "_id": "5d1cc27b37c9751001f5c12f",
            "title": "Shilkhak",
            "description": "Shilkhak-Inshushinak",
            "date": "2019-07-03T14:58:03.797Z",
            "__v": 0
        },
        {
            "_id": "5d1cc45655780f11112a023f",
            "title": "Унташ",
            "description": "Untash-Napirisha",
            "date": "2019-07-03T15:05:58.699Z",
            "__v": 0
        },
        {
            "_id": "5d1ef36c503601183b5f856f",
            "title": "dgfdgfdhgf",
            "description": "bbbbbbbbbbbbbbbbb",
            "date": "2019-07-05T06:51:24.873Z",
            "__v": 0
        },
        {
            "_id": "5d1ef381503601183b5f8570",
            "title": "qewytuytruytru",
            "description": "jhfgasjdfgasjdfgjhsdf",
            "date": "2019-07-05T06:51:45.761Z",
            "__v": 0
        }
    ]
  };
  class App extends React.Component {
    state = {
      data: []
    }
    componentDidMount() {
      axios.get('http://localhost:5555/posts')
        .then(res =&gt; {
          const data = res.data;
          this.setState({ data });
        })
    }
    render() {
      return (
        &lt;div&gt;
          &lt;Shutruk name={ this.state.data.data[0].title }/&gt;
        &lt;/div&gt;
      )
    }
  }
  export default App;
  </code></pre>
  
  <p>Here is the component:</p>
  
  <pre><code>import React from 'react';
  
  class Shutruk extends React.Component {
    render() {
      return (
        &lt;div&gt;
          &lt;h1&gt;This is is {this.props.name}!&lt;/h1&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default Shutruk;
  </code></pre>
  
  <p>I use axios to get data from backend, but when I insert it to props, it does'nt work. I create an array qwerty[] with the same data, and when I replace with:</p>
  
  <pre><code>return (
    &lt;div&gt;
      &lt;Shutruk name={ qwerty.data[0].title }/&gt;
    &lt;/div&gt;
  )
  </code></pre>
  
  <p>it works correctly. What is the problem, if there is no difference between 'this.state.data' and 'qwerty'?
  I checked with console.log and the result is same!
  Thanks to everyone for any help!</p>