How to remove duplicate values from dropdown in react

Question

I have an array of data that I am using to create a drop down logic with.But there is a series of duplicate values when I create the drop-down using :

                    <select>
`                     `{
                        this.state.statistic_table.map((obj) => {
                            return <option value={obj.period}>{obj.period}</option>
                        })
                    }</select>

The long list of arrays contains a number of duplicate period values which are actually months. So in the dropdown I would get each and every value. I would like to eliminate the duplicates from the dropdown. How could I achieve that? Thanks

Does this answer your question? Remove duplicates from an array of objects in JavaScript — wentjun
– wentjun, Commented May 9, 2020 at 15:46

Treycos · Accepted Answer · 2020-05-09 15:44:56Z

3

One way to acheive that could be to use the Set API after mapping your array :

{Array.from(new Set(this.state.statistic_table.map(obj => obj.period))).map(period => {
    return <option value={period}>{period}</option>
})}

And then converting it back to an array using Array.from to map your component with it

answered May 9, 2020 at 15:44

Treycos

7,4913 gold badges29 silver badges53 bronze badges

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

1 Comment

Derrick Omanwa Over a year ago

A similar solution to the one below, but you directly gave me the solution I needed . Thanks. I'll keep this in mind.

Milos N. · Accepted Answer · 2020-05-09 15:48:21Z

1

I will fix that on this way:

1) Using some events e.g. componentDidMount where you need to filter your array on next :

define an empty array in the state:

this.state = {
 let filteredArray = [];
}

On mount filter them :

componentDidMount() {
    let uniq = Array.from(new Set(this.state.statistic_table));
    this.setState(uniq);
}

If the object type is correct you can do something like this:

 <select>{
      this.state.filteredArray.map((obj) => {
           return <option value={obj.period}>{obj.period}</option>
      })
 }</select>

answered May 9, 2020 at 15:48

Milos N.

4,8876 gold badges22 silver badges35 bronze badges

Collectives™ on Stack Overflow

How to remove duplicate values from dropdown in react

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related