title: Target an object while fetching json from mock api with ReactJS
body: <p>I set up a mock rest api with json-server and it's sitting locally for me to pull in through to demo a web app I'm working on. Here is the json: </p>
  
  <pre><code>{
    "mockData": {
      "grapevine": [
        { 
          "entity": "67.6.201.77", 
          "category": "scan", 
          "source": "emotet_tracker",
          "rscore": 42 
        },
        { 
          "entity": "67.6.201.77", 
          "category": "popular", 
          "source": "vinter",
          "rscore": 69 
        },
        { 
          "entity": "67.6.201.77", 
          "category": "spam", 
          "source": "uceprotect",
          "rscore": 48 
        },
        { 
          "entity": "67.6.201.77", 
          "category": "c2", 
          "source": "c2_validator",
          "rscore": 41 
        },
        { 
          "entity": "67.6.201.77", 
          "category": "scan", 
          "source": "greenleaf",
          "rscore": 37 
        }
      ]
    }
  }
  </code></pre>
  
  <p>I will be specifically pulling this "grapevine" data into a table that will display on the dashboard. Right now I am getting all (5) of the entities, categories, etc... in one cell and obviously that's not formatted properly. Here is the code:</p>
  
  <pre><code>import React from 'react';
  import { Table } from 'reactstrap';
  
  export default class Example extends React.Component {
  
    constructor() {
      super();
      this.state = {
        people: [],
      };
    }
  
    componentDidMount() {
    fetch("http://localhost:3000/mockData/")
      .then(grapevine =&gt; grapevine.json())
      .then(data =&gt; this.setState({ people: data.grapevine }));
    }
  
    render() {
      return (
        &lt;div className="col-md-12 bucket gv-bucket"&gt;
          &lt;div className="card"&gt;
            &lt;div className="card-header" id="gv-header"&gt;
              &lt;span className="header-title"&gt;
                Grapevine&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;i class="fa fa-th-list" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;/span&gt;
              &lt;span className="float-right"&gt;
                &lt;button className="btn btn-sm btn-secondary"&gt;Export Data&lt;/button&gt;
                &lt;a href=""&gt;
                  &lt;i className="fa fa-close close-window fa-lg"&gt;&lt;/i&gt;
                &lt;/a&gt;
              &lt;/span&gt;
            &lt;/div&gt;
            &lt;div className="card-block"&gt;
                &lt;Table hover bordered&gt;
                    &lt;thead&gt;
                    &lt;tr className="table-heading"&gt;
                        &lt;th class="table-header"&gt;Entity&lt;/th&gt;
                        &lt;th class="table-header"&gt;Category&lt;/th&gt;
                        &lt;th class="table-header"&gt;Source&lt;/th&gt;
                        &lt;th class="table-header"&gt;Risk Score&lt;/th&gt;
                    &lt;/tr&gt;
                    &lt;/thead&gt;
                    &lt;tbody&gt;
                    &lt;tr&gt;
                        &lt;th scope="row"&gt;
                        {this.state.people.map(grapevine =&gt; (
                          &lt;div&gt;{grapevine.entity}&lt;/div&gt;
                        ))}
                        &lt;/th&gt;
                        &lt;td&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;/tbody&gt;
                &lt;/Table&gt;
              &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>If I try </p>
  
  <pre><code>                     {this.state.people.map(grapevine =&gt; (
                          &lt;div&gt;{grapevine.entity[0]}&lt;/div&gt;
                        ))}
  </code></pre>
  
  <p>I get all five entries still but just the first letter. What am I doing wrong here? I'm obviously targeting these individual properties but I don't want all five objects displaying in the same cell.   </p>