ReactJS: How to prevent duplicate values in array.push?

Question

While selecting one option in the Select box at that time rest of the options are become multiple values. How can i prevent this duplicate values ?

import Select from 'react-select';
const dataOptions = []; 
class App extends React.Component {
    constructor(props) {
        super(props);
        this.data = [];
        this.getData();
    }
    getData = () => { api.request({url: `/getdata`}).then(res => res.map(el => this.data[el.id] = el.name)) }

    addData = () => {
        const { selectedId } = this.state;
        var datas = this.data;
        console.log(datas);
        datas.map((name, index) => {
            if (!dataOptions.includes(name)) {
                console.log('b4 push:', dataOptions)
                dataOptions.push({ value: index, label: name });
                console.log('aftr push:', dataOptions)
            }
        });
        return (
            <Select options={dataOptions}
            isMulti
            />
        );
    }
}

Something is wrong happening in this syntax:

datas.map((name, index) => {
  if (!dataOptions.includes(name)) {
       dataOptions.push({ value: index, label: name });
  }
});

Console Results

[ "data-1", "data-2", "data-3"]

b4 push: [
  {value: 1, label: "data-1"}
  {value: 2, label: "data-2"}
  {value: 3, label: "data-3"}
]

aftr push: [
  {value: 1, label: "data-1"}
  {value: 2, label: "data-2"}
  {value: 3, label: "data-3"}
]

P.S: Here in aftr push i have already selected first option from drop down; so in result if should not be displayed in the array values.

Thanks in advance...!

Using `.map()` you need to return something, for what you are doing there you can change `.map()` to `.forEach()`, in foreach you don't need to return anything. — Nicolae Maties, Nov 11 '19 at 11:25
@Shubh it's not working; using this results are not displaying. — TMA, Nov 11 '19 at 11:34
Please post the sample data then,because if you are using destructring assignment that should be the syntax. — Shubham Dixit, Nov 11 '19 at 11:36
Please post a json format data ,as I cant recreate the issue with the picture.See the updated answer — Shubham Dixit, Nov 11 '19 at 11:42
do: `if(!dataOptions.includes({value: index, label: name})) {` ... — Evhz, Nov 11 '19 at 11:43
@Evhz that wont work because both the reference of objects will be different . They would be different objects.For reference look here-https://stackoverflow.com/questions/53748605/does-include-works-with-array-of-objects — Shubham Dixit, Nov 11 '19 at 11:51

Shubham Dixit · Accepted Answer · 2019-11-11T12:33:04.290

3

The destructuring syntax should be like below

datas.map(({name, index}) => {
      if (!dataOptions.includes(name)) {
           dataOptions.push({ value: index, label: name });
      }
    });

Moreover you don't need external array to push the data inside map function as the function by default returns an array, you can do simply like below

 let expected_data=datas.map(({name, index}) => {
              if (!dataOptions.includes(name)) {
                 return  { value: index, label: name };// return a value
              }
            });

The expected_data will contain the data you need after operation

See the snippet-

let data = [{
  "name": 1,
  "index": 2
}, {
  "name": 11,
  "index": 21
}]

console.log(data.map(({
  index,
  name
}) => {

  return {
    value: index,
    label: name
  }

}))

You better use Array.some() for what you are looking

 datas.map((name,index) => { // here index is the iterator
                if(!dataOptions.some(({value,label})=>label==name  ))
            {
                   dataOptions.push({ value: index, label: name });
              }
            });

edited Nov 11 '19 at 12:33

answered Nov 11 '19 at 11:30

Shubham Dixit

9,242
4
27
46

That doesn't work as [includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) would not return results if you search a string inside an array of objects, regardless those objects have strings or pears. – Evhz Nov 11 '19 at 11:48
And how can you be so sure that the dataOptions is array of objects ?? @Evhz – Shubham Dixit Nov 11 '19 at 11:49
You are confused ,dataoptions is an object array ,you cant use includes just to check if a primitive value exists in it .Please specify which key of dataoption you wanna check value or label? – Shubham Dixit Nov 11 '19 at 12:00
Doesn't matter; my result should be like this: if i select an option from any drop down values then the rest of values can not be duplicated... So currently if i select value 1 then other two values become duplicates and it becomes total 4 values with duplication. – TMA Nov 11 '19 at 12:05
No records are fetching using this method in select box, i also tried like this: ` if(dataOptions.some(({value,label}) => { value == index, label == name } )) ` – TMA Nov 11 '19 at 12:12
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/202147/discussion-between-aananddham-and-shubh). – TMA Nov 11 '19 at 12:15
`[ "data-1", "data-2", "data-3"]` is this your datas array?w hich you are using with map function – Shubham Dixit Nov 11 '19 at 12:15

ReactJS: How to prevent duplicate values in array.push?

1 Answers1

Linked