title: React Hooks with Axios, updating state with no duplicates for drop down list
body: <p>I am new to react hooks and fairly new to react.  I am trying to generate a dropdown list that pulls values from my server.  I am having trouble removing the duplicates from the list.  This code probably needs a lot of re working but any help would be appreciated.  I include the songform.js below and I will add what my mongodb information looks like.  </p>
  
  <pre><code>SONGFORM.JS
  
  import React, { useState, useEffect } from "react";
  import axios from "../../axios-orders";
  
  import useDropdown from '../../components/dropdown/Dropdown';
  
  const SongForm = (props =&gt; {
    const [mood_list, setMood] = useState([]);
    const [genre_list, setGenre] = useState([]);
    const [items, setItems] = useState([]);
    const [enteredSong, setEnteredSong] = useState('');
    const [selectedGenre, GenreDropdown] = useDropdown('Genre', 'empty', genre_list);
    const [selectedMood, MoodDropdown] = useDropdown('Mood', 'empty', mood_list);
  
    useEffect(() =&gt; {
      const fetchData = async () =&gt; {
        let response = await axios.get('/api/songs')
        setItems(response.data.songs);
      }
      fetchData();
    }, []);
  
    let i = 0;
    for (i = 0; i &lt; items.length; i++) {
      genre_list.push(items[i].genre)
    }
  
    let j = 0;
    for (j = 0; j &lt; items.length; j++) {
      mood_list.push(items[j].mood)
    }
  
    const submitHandler = (event) =&gt; {
      event.preventDefault();
      props.filterSongs({
        genre: selectedGenre,
        mood: selectedMood,
        songSearch: enteredSong,
      });
    };
  
    return (
      &lt;div className="filter-page"&gt;
        &lt;form onSubmit={submitHandler}&gt;
  
          {/* Search Filter */}
  
          &lt;div className="centered-flex-container"&gt;
            &lt;h1&gt;Search By Name:&lt;/h1&gt;
            &lt;input
              className='searchbar'
              type="text"
              id="songInput"
              value={enteredSong}
              onChange={event =&gt; {
                setEnteredSong(event.target.value);
              }}
            /&gt;
            &lt;hr&gt;&lt;/hr&gt;
          &lt;/div&gt;
  
          &lt;div className='centered-flex-container'&gt;
            &lt;h1&gt;Search By Filter:&lt;/h1&gt;
            &lt;GenreDropdown /&gt;
          &lt;/div&gt;
  
          &lt;div className='centered-flex-container'&gt;
            &lt;MoodDropdown /&gt;
          &lt;/div&gt;
  
          &lt;div className='centered-flex-container'&gt;
            &lt;button
              className='dark-button'
              type="submit"
            &gt;
              Submit
          &lt;/button&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    )
  });
  
  export default SongForm;
  
  IMPORTED DATA FROM AXIOS AND MONGODB
  
  console.log(response.data.songs) shows
  
  (5) [{…}, {…}, {…}, {…}, {…}]
  
  0:
  audio: "midwest_money.mp3"
  genre: "Rap/Hip-Hop"
  id: "5edd0cdc38cb55332ccbd8f6"
  mood: "Relaxed"
  name: "Midwest Money"
  _id: "5edd0cdc38cb55332ccbd8f6"
  __proto__: Object
  
  1: {_id: "5edd0cdc38cb55332ccbd8f2", name: "Invincible", genre: "Electronic/Pop", mood: "Uplifting", audio: "invincible.mp3", …}
  2: {_id: "5edd0cdc38cb55332ccbd8f4", name: "Sun Kiss", genre: "Electronic/Pop", mood: "Energetic", audio: "sun_kiss.mp3", …}
  3: {_id: "5edd0cdc38cb55332ccbd8f5", name: "Wormhole", genre: "Electronic/Pop", mood: "Energetic", audio: "wormhole.mp3", …}
  4: {_id: "5edd0cdc38cb55332ccbd8f3", name: "Pier Light", genre: "Country", mood: "Uplifting", audio: "pier_light.mp3", …}
  length: 5
  __proto__: Array(0)
  
  </code></pre>