title: Mapping data from contentful
body: <p>I've been following a tutorial series and I'm trying to extrapolate on what I've done thus far. </p>
  
  <p>I have queried contentful to return the product details for which one of the data types is an array of productFeatures. I've tried to map this to a list and was expecting this to iterate out several li's. However, I've ended up with one li that contains all of the entries. Can anyone help me understand what I've misunderstood here?</p>
  
  <p>This is my attempt in the product features component</p>
  
  <pre><code>import React from 'react'
  import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
  import './spec.css'
  
  const Spec = ({data}) =&gt;(
  
      &lt;div&gt;
          &lt;Tabs&gt;
              &lt;TabList&gt;
              &lt;Tab&gt;Key Features&lt;/Tab&gt;
              &lt;Tab&gt;Product Documents&lt;/Tab&gt;
              &lt;/TabList&gt;
  
              &lt;TabPanel&gt;
                  &lt;ul className="spec_list"&gt;
                      {data.allContentfulProductPage.edges.map(edge =&gt;(
                          &lt;li className="spec_list__item"&gt;{edge.node.productFeatures}&lt;/li&gt;
                      ))}
  
                  &lt;/ul&gt;
              &lt;/TabPanel&gt;
              &lt;TabPanel&gt;
              &lt;h2&gt;Any content 2&lt;/h2&gt;
              &lt;/TabPanel&gt;
          &lt;/Tabs&gt;
      &lt;/div&gt;
  )
  
  export default Spec
  </code></pre>
  
  <hr>
  
  <p>Here is the graphql query return</p>
  
  <pre><code>{
    "data": {
      "allContentfulProductPage": {
        "edges": [
          {
            "node": {
              "productTitle": "HD Pro Projector M220",
              "productPrice": 299,
              "productDescription": {
                "productDescription": "Designed for use with iPhone*, iPad*, MacBook, and Apple TV, the Miroir HD Projector M220 delivers HD-quality projection for streaming, entertainment, or presentation purposes. Even better, it's small enough to fit in your briefcase or bag. The projector uses a long-lasting LED light source and is built with Texas Instrument's DLP technology, which provides a cinema-quality movie experience.\n"
              },
              "productFeatures": [
                "Texas Instruments DLP Technology",
                "1280 x 720 (720p) native resolution",
                "1080p maximum input resolution",
                "Auto focus with vertical keystone",
                "HDMI input",
                "Viewable screen size from 20 to 100 inches",
                "Built-in lithium-ion battery",
                "Two hours of projecting time",
                "Two built-in 2-watt speakers; audio out jack (3.5mm)"
              ],
              "productImage": [
                {
                  "file": {
                    "url": "//images.ctfassets.net/2nhrtgh52wv0/7u8biIRohlsl0OFKBWZ0ti/1dabcec4edd13dee708107929ec8e505/product-shot.jpg"
                  }
                },
                {
                  "file": {
                    "url": "//images.ctfassets.net/2nhrtgh52wv0/7u8biIRohlsl0OFKBWZ0ti/1dabcec4edd13dee708107929ec8e505/product-shot.jpg"
                  }
                }
              ],
              "productSceneImage": {
                "file": {
                  "url": "//images.ctfassets.net/2nhrtgh52wv0/6AzIFw9pZDsRtH1JI3A9XR/80ca785ffc60310690e337f7f936a74f/front-room-scene.jpg"
                }
              }
            }
          }
        ]
      }
    }
  }
  </code></pre>
  
  <p>Here is the graphql query return</p>
  
  <pre><code>export const query = graphql`
    query ProductQuery {
      allContentfulProductPage{
        edges{
          node{
            productTitle
            productPrice
            productFeatures
            productDescription {
              productDescription
            }
          }
        }
      }
    }
  `
  </code></pre>