title: How to Map array by removing duplicates
body: <p>I'm developing an application using React.js and using Relay.js for fetching data and have a JSON response for a component like this:</p>
  
  <pre><code>{
    outfit(id :"T3V0Zml0Tm9kZTo1") {
      id
      title
      productvariant {
        edges {
          node {
            id
            title
            product {
              edges {
                node {
                  id
                  brand
                }
              }
            }
          }
        }
      }
    }
  }
  </code></pre>
  
  <p>(<a href="https://gist.github.com/imzautomation/b43e68d9053e66d08da330b0962be068" rel="nofollow noreferrer">github link</a>) and I am mapping all the products in a tab like this:</p>
  
  <pre><code>&lt;Grid&gt;
    { this.props.outfit.productvariant.edges.map((variantEdge, i) =&gt; (
      &lt;Grid.Column mobile={16} tablet={8} computer={12}&gt;
        &lt;Grid.Column mobile={16} tablet={8} computer={12}&gt;
          &lt;article id ={variantEdge.node.id} &gt;
            &lt;header style = {styles.header}&gt;
              &lt;h2&gt;
                {variantEdge.node.title}
              &lt;/h2&gt;
            &lt;/header&gt;
          &lt;/article&gt;
          &lt;Tabs defaultActiveKey={1} id="uncontrolled-tab-example"&gt;
            &lt;Tab eventKey={1} title="Tab 1"&gt;
              &lt;section style = {styles.row}&gt;
                {variantEdge.node.product.edges.map((productEdge,i) =&gt;(
                  &lt;section &gt;
                    &lt;section  &gt;
                      &lt;Card   style = {styles.col23} &gt;
                        &lt;Image src="https://cdn.lookastic.com/beige-dress-shirt/roberto-cavalli-ruffled-cotton-voile-shirt-medium-591164.jpg" /&gt;
                          &lt;Card.Content  style = {styles.col23}&gt;
                            &lt;Card.Header&gt;{productEdge.node.title}&lt;/Card.Header&gt;
                          &lt;/Card.Content&gt;
                        &lt;/Card&gt;
                      &lt;/section&gt;
                    &lt;/section&gt;
                  ))}
                &lt;/section&gt;
  </code></pre>
  
  <p>(<a href="https://gist.github.com/imzautomation/472c9ce6db5646d6adc2ae5002ab8db9" rel="nofollow noreferrer">github link</a>). As you can see in response I have products with the field brand. How can I loop Brands and remove the duplicates and map them to a side nav? I want to have a side nav widget next to tab component which will display all the brands available for that particular product.</p>