title: Prevent duplicates from json array with reactjs and axios
body: <p><strong><em>Look at my comments below the conversation with @Akrion who helped me fix this to see the solution!!!!</em></strong></p>
  
  <p>I'm really new to reactJS and axios both but was trying something with a classmate earlier and now I'm stuck. I want to render the "sport"-categories from the json-file, but the same categories shows up several times. What is a good practice to sort away the duplicates so that only e.g. "Football" shows up once?</p>
  
  <p>Sorry, again, new to this. I've been trying some stuff like Javascript functions to sort it... but I'm just unsure where to put the code and I keep going in circles. Let me know if anything that I said is confusing (English is not my first language). Here is my code:</p>
  
  <pre><code>import React, { Component } from "react";
  import axios from 'axios';
  
  class SportsList extends Component {
    state = {
      posts: []
    }
    componentDidMount(){
      axios.get('https://json-file.json')
      .then(res =&gt; {
        this.setState({
          posts: res.data
        })
      })  
    }
  
    render() {
      console.log(this.props)
      const { posts } = this.state;
      const postList = posts.length ? (
          posts.map(post =&gt; {
            return (
              &lt;div key={post.id}&gt;
                &lt;div&gt;
                  {post.sport}
                &lt;/div&gt;
              &lt;/div&gt;
            )
          })
        ) : (
          &lt;div&gt;No Sports Available&lt;/div&gt;
        )
      return (
        &lt;div&gt; 
        {postList}
      &lt;/div&gt;
      );
    }
  }
  
  export default SportsList;
  </code></pre>