title: Distinct Value in Json Data
body: <p>I have a api call that returns data in json format. I would like to retrieve a distinct campus for dropdown list. For example, my json data format is like below:</p>
  
  <pre><code>courses=[{campusname; A, coursename: X, id: 1},
            {campusname: A, coursename: Y, id: 2},
            {campusname: B, coursename: Z, id: 3}]
  </code></pre>
  
  <p>But my code below does not return any selections here. I am not sure the <code>Set()</code> syntax is correct.</p>
  
  <p>App.js:</p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  import axios from 'axios';
  import CampusName from './CampusName';
  class App extends Component {
  constructor() {
  super();
  this.state ={
    courses:[]
  }
  }
  
  
  componentDidMount(){
  
    axios.get('https://mydomain/myAPIURL')
         .then(response=&gt;{
         this.setState({courses:response.data});
        });
    }
   _getUniqueCampusName(){
  const courses=this.state.courses;
  const campusSelection=[...new Set(courses)];
  return campusSelection.map(campus=&gt;(&lt;CampusName name={campus.campusname}/&gt;));
  
  }
  render() {
  const campusName=this._getUniqueCampusName;
  return (
    &lt;div className="App"&gt;
      &lt;div className="filter"&gt;
         &lt;select&gt;
           &lt;option&gt;Select a Campus&lt;/option&gt;
          {campusName}
  
         &lt;/select&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
   );
   }
  }
  
  export default App;
  </code></pre>
  
  <p>CampusName.js</p>
  
  <pre><code>import React from 'react';
  const campusName=props=&gt;{
  return(
     &lt;option value={props.name}&gt;{props.name}&lt;/option&gt;
  );
  }
  export default campusName;
  </code></pre>