title: Filter data by a specific id for display in ReactJS
body: <p>I want to select the data that matches this specific id. I have made an API call which gives me this JSON data, but I only want the data where the id is <code>eb9fa7e9-3dc9-11e6-a9f9-28e347</code>. How do I filter just this data?</p>
  
  <pre><code>     [
            {
              "food_item_id": "a095eca7-3dcf-11e6-a9f9-28e347",
              "food_group_id": "eb9fa7e9-3dc9-11e6-a9f9-28e347",
              "food_item_name": "Don't know jack"
            },
            {
              "food_item_id": "a09b073d-3dcf-11e6-a9f9-28e347",
              "food_group_id": "ebaeef2c-3dc9-11e6-a9f9-28e347",
              "food_item_name": "Oreo cookie monster"
            },
            {
          "food_item_id": "a180332e-3dcf-11e6-a9f9-28e347",
          "food_group_id": "ab9fa7e9-3dc9-11e6-a9f9-69e8124",
          "food_item_name": "Big Country"                  
        }
          ]
  </code></pre>
  
  <p>How do I filter by <code>"food_group_id": "eb9fa7e9-3dc9-11e6-a9f9-28e347"</code>:</p>
  
  <pre><code>var canvases = this.state.foodinfo.map(function(data) {
           return (
             &lt;div&gt;
             &lt;Card className="col-xs-12 col-sm-4 eachCard"&gt;
               &lt;CardImg top width="100%" src={data.food_item_pic} alt="Card image cap" /&gt;
               &lt;CardBlock className="cardBlock"&gt;
                 &lt;CardTitle&gt;{data.food_item_name}&lt;/CardTitle&gt;
                 &lt;CardSubtitle&gt;${data.food_item_price}&lt;/CardSubtitle&gt;
                 &lt;span class="glyphicon glyphicon-plus-sign btnClass"&gt;&lt;/span&gt;
               &lt;/CardBlock&gt;
             &lt;/Card&gt;
             &lt;/div&gt;
           );
         });
  </code></pre>
  
  <p>I added a filter before <code>map</code>, but I am getting an error on the item of the array:</p>
  
  <pre><code>var canvases = this.state.foodinfo.filter(item =&gt; food_group_id=== 'eb9fa7e9-3dc9-11e6-a9f9-28e347').map(function(data) {
               return (
                 &lt;div&gt;
                 &lt;Card className="col-xs-12 col-sm-4 eachCard"&gt;
                   &lt;CardImg top width="100%" src={data.food_item_pic} alt="Card image cap" /&gt;
                   &lt;CardBlock className="cardBlock"&gt;
                     &lt;CardTitle&gt;{data.food_item_name}&lt;/CardTitle&gt;
                     &lt;CardSubtitle&gt;${data.food_item_price}&lt;/CardSubtitle&gt;
                     &lt;span class="glyphicon glyphicon-plus-sign btnClass"&gt;&lt;/span&gt;
                   &lt;/CardBlock&gt;
                 &lt;/Card&gt;
                 &lt;/div&gt;
               );
             });
  </code></pre>