title: Access values from json in react
body: <p>I am trying to access variables from json in react component.</p>
  
  <p>This is JSON I am getting:</p>
  
  <pre><code>{
      "id": 5,
      "title": "Hello",
      "text": "Hello, this is my first article...",
      "picture": "pic",
      "comments": [],
      "user": {
          "id": 3,
          "name": "Anonim",
          "password": "123456"
      }
  }
  </code></pre>
  
  <p>The attached user is person who created the post.
  The attached comments is list of comments related to this post.
  In routing I am doing the following:</p>
  
  <pre><code>    &lt;Switch&gt;
        &lt;Route path='/' exact component={PostsPage} /&gt;
        &lt;Route path='/:id' exact component={PostProfilePage} /&gt;
      &lt;/Switch&gt;
  </code></pre>
  
  <p>In react class component</p>
  
  <pre><code>class PostProfile extends Component {
  
    constructor(props){
      // Pass props to the parent component
      super(props);
      // Set initial state
      this.state = {
        // State needed
        post: []
      };
    }
  
    componentDidMount() {
      this.fetchPost();
    }
  
    fetchPost() {
      const {match} = this.props
      const id = match.params.id
      console.log(id)
      fetch('/'+id)
      .then(res =&gt; {
        return res.json();
      })
      .then(data =&gt; {
        this.setState({
          post: data
        });
      })
      .catch(err =&gt; {
        console.log(err);
      });
    }
  
    render() {
      return (
        &lt;div&gt;
        &lt;li&gt; {this.state.post.title} &lt;/li&gt;
        &lt;li&gt; {this.state.post.text} &lt;/li&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default withRouter(PostProfile)
  </code></pre>
  
  <p><strong>does not work</strong></p>
  
  <pre><code> &lt;li&gt; {this.state.post.user.name} &lt;/li&gt;
    &lt;li&gt; {this.state.post.comments...} &lt;/li&gt;
  </code></pre>
  
  <p>Why I cannot access user and comments?
  And is it possible to get user and comments in different components? (not calling the fetch method again and again)?</p>
  
  <p>Thank you in advance!</p>