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
– Nicolae Maties, Commented Nov 11, 2019 at 11:25
@Shubh it's not working; using this results are not displaying. — TMA
– TMA, Commented Nov 11, 2019 at 11:34
Please post the sample data then,because if you are using destructring assignment that should be the syntax. — Shubham Dixit
– Shubham Dixit, Commented Nov 11, 2019 at 11:36

Shubham Dixit · Accepted Answer · 2019-11-11 12:33:04Z

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, 2019 at 12:33

answered Nov 11, 2019 at 11:30

Shubham Dixit

9,2685 gold badges32 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Evhz Over a year ago

That doesn't work as includes would not return results if you search a string inside an array of objects, regardless those objects have strings or pears.

Shubham Dixit Over a year ago

And how can you be so sure that the dataOptions is array of objects ?? @Evhz

Shubham Dixit Over a year ago

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?

TMA Over a year ago

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 Over a year ago

No records are fetching using this method in select box, i also tried like this: ` if(dataOptions.some(({value,label}) => { value == index, label == name } )) `

|

Collectives™ on Stack Overflow

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

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related