title: remove duplicate error from JSON value React Native
body: <p>I am trying to pass filtered value from JSON to the parent component, however I've tried using <a href="https://dev.to/samanthaming/how-to-remove-array-duplicates-in-es6-50f6" rel="nofollow noreferrer"><code>Set</code></a> but seems the output is still the same. The component that I'm using to render the JSON is picker from <code>native-base</code>. I want to filter out the repeated value in my picker. Greatly appreciated if anyone can help me.</p>
  <p><a href="https://i.stack.imgur.com/27QdQ.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>Here's my code.</p>
  <pre><code>Picker.js
  
  const DefaultPicker = ({labelItem, pickerWidth, onHandleValue, ...rest}) =&gt; {
    const context = useContext(WindowContext);
    const [selectedValue, setSelectedValue] = useState('-Select-');
    const [data, setData] = useState([]);
    const {user, setUser} = useContext(AuthContext);
  
    function onNewData() {
      if (user) {
        user.getIdToken().then((idToken) =&gt; {
          Axios.get('URL_ENDPOINT', {
            headers: {
              Authorization: 'Bearer' + idToken,
            },
          })
            .then(({data}) =&gt; {
              setData(data.features);
              // console.log(data.features);
            })
            .catch((error) =&gt; {
              console.error(error);
            });
        });
      }
    }
  
    useEffect(() =&gt; {
      const form = onNewData(onNewData);
      return form;
    }, []);
  
    return (
          &lt;PickerWrapper&gt;
            &lt;PickerItem
              width={pickerWidth}
              height=&quot;60&quot;
              mode=&quot;dropdown&quot;
              selectedValue={selectedValue}
              onValueChange={(itemValue, itemIndex) =&gt; {
                setSelectedValue({itemValue});
              }}&gt;
              {Array.from(
                new Set(
                  data.map((value, index) =&gt; (
                    &lt;PickerItem.Item
                      key={index}
                      label={value.properties[labelItem]}
                      value={value.properties[labelItem]}
                      {...rest}
                    /&gt;
                  )),
                ),
              )}
            &lt;/PickerItem&gt;
          &lt;/PickerWrapper&gt;
    );
  };
  </code></pre>
  <p>And here is my parent component</p>
  <pre><code>SiteData.js
  
  const SiteData = () =&gt; {
    const [values, setValues] = useState([]);
    const onHandleValue = (params) =&gt; {
      setValues(params);
      console.log(params);
    };
    return (
      &lt;ScrollableView&gt;
        &lt;DetailContainer&gt;
          &lt;DetailWrapper&gt;
            &lt;DetailTitle&gt;Site Data&lt;/DetailTitle&gt;
            &lt;DetailSubtitle marginTop=&quot;10&quot;&gt;
              Insert new data found during your audit or observation session
            &lt;/DetailSubtitle&gt;
            &lt;DetailSubcontainer&gt;
              &lt;DefaultPicker
                labelItem={'category'} &lt;-- receive value from child
                pickerWidth=&quot;100%&quot;
                onHandleValue={onHandleValue}
              /&gt;
            &lt;/DetailSubcontainer&gt;
          &lt;/DetailWrapper&gt;
        &lt;/DetailContainer&gt;
      &lt;/ScrollableView&gt;
    );
  };
  </code></pre>
  <p><strong>UPDATE 1:</strong></p>
  <p>I'm using the filter() method so i can create a new array but it returns only one value in the picker list.</p>
  <pre><code>const indexData = data.filter(
      ({category}, index) =&gt; {
        return (
          data.findIndex(
            (item) =&gt;
              item.category === category,
          ) === index
        );
      },
    );
  </code></pre>
  <p>The output</p>
  <p><a href="https://i.stack.imgur.com/oygc4.png" rel="nofollow noreferrer">enter image description here</a></p>