title: How can I remove duplicate values ​from my json in React
body: <p>I am developing an application with React and I have a problem. I have made a fetch from a json and the values are repeated. I want only each value to appear once.</p>
  
  <p>I hope that it only returns once each of the elements of "Padre": "CRM", "Permisos" and "Telefonia". The same for "Hijo".</p>
  
  <p>I've tried changing ".concat" to ".reduce" because I've read that it can be done like this, but it does not work. I have seen examples but none of them works on "this.state" so I do not know how to do it.</p>
  
  <p>Can you help me with the correct way to do it?</p>
  
  <p>This is a part of my json file </p>
  
  <pre><code>[
     {
        "Id":"114",
        "Padre":"CRM",
        "Hijo":"Argumentarios"
     },
     {
        "Id":"115",
        "Padre":"CRM",
        "Hijo":"Argumentarios"
     },
     {
        "Id":"116",
        "Padre":"CRM",
        "Hijo":"Argumentarios"
     },
     {
        "Id":"44",
        "Padre":"Permisos",
        "Hijo":"root"
     },
     {
        "Id":"45",
        "Padre":"Permisos",
        "Hijo":"root"
     },
     {
        "Id":"46",
        "Padre":"Permisos",
        "Hijo":"root"
     },
     {
        "Id":"47",
        "Padre":"Permisos",
        "Hijo":"root"
     },
     {
        "Id":"50",
        "Padre":"Telefonia",
        "Hijo":"Audio"
     },
     {
        "Id":"51",
        "Padre":"Telefonia",
        "Hijo":"Audio"
     },
     {
        "Id":"52",
        "Padre":"Telefonia",
        "Hijo":"Configuracion"
     },
     {
        "Id":"70",
        "Padre":"Telefonia",
        "Hijo":"Rutas"
     }
  ]
  </code></pre>
  
  <p>For confidential reasons I can not show the actual file. 
  In my next code I change the fetch for a fake json url</p>
  
  <p><strong>I Edit my code with @Avanthika and @blaz code.</strong> Currently the code works but shows only the first value it finds of "Father" and "Son". I need to show only once each of the different values ​​of "Father" and "Son". Example result:
  Father:
       CRM
       PERMISOS
  Son:
       ARGUMENTARIOS
       ROOT</p>
  
  <p>Currenly, with my new code i see only: CRM (Padre) and Argumentarios (Son). The rest of the elements are not shown.</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Nav extends Component{
      constructor(props){
          super(props)
          this.state = {
              menuSubmenu:[]
          }
      }
  
      componentWillMount(){
          fetch('http://FAKE.php')
          .then(response =&gt; response.json())
          .then(menuSubmenu =&gt;{
  
              menuSubmenu.forEach(datos =&gt; {
                  let data = {
                      menu:datos.Padre,
                      submenu:datos.Hijo,
                      id:datos.Id
                  }
  
                  //console.log( data )
                  //console.log (data.menu);
                  this.setState({ 
                      menuSubmenu:this.state.menuSubmenu.concat([data])
                  }) 
              })
          })
      }
      render() {
          const array = [...this.state.menuSubmenu];
          const distinctValues = array.filter(
              ({ Padre, Hijo }, index) =&gt; {
                return array.findIndex(item =&gt; item.Padre === Padre &amp;&amp; item.Hijo === Hijo) === index;
            });
            //console.log(this.state.menuSubmenu);
            //console.log(distinctValues);
  
          if (distinctValues.length &gt; 0) {
            return(
              &lt;div&gt;
                {distinctValues.map(datos =&gt; &lt;Navegacion key={datos.id} menu={datos.menu} submenu={datos.submenu} /&gt;)}
              &lt;/div&gt;
            );
          }
          return (&lt;p&gt;Cargando usuarios...&lt;/p&gt;);
        }
  }
  
  class Navegacion extends Component{
      render(){
          return (
                       &lt;ul className="list"&gt;
                          &lt;li className="list__item"&gt;{this.props.menu}
                              &lt;ul className="list"&gt;
                                  &lt;li className="list__item"&gt;
                                      &lt;a href="#"&gt;{this.props.submenu}&lt;/a&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
          )
      }
  }
  
  export default Nav;
  </code></pre>
  
  <p>This image is the result of my json.<a href="https://i.stack.imgur.com/cYKBO.png" rel="nofollow noreferrer">My json result</a></p>
  
  <p>I hope you can help me with the "reduce" function.
  ¡Thanks a lot!</p>