How to display the data related when an option is clicked on drop down?

Question

I have a drop-down list which is coming from the query and when I click on the option the related data should display. I have this drop-down as shown in image

.

How to display the option only once.

I have this below code:

 class StoreLocator extends PureComponent {
    constructor(props) {
        super(props)

        this.state = {
            options : [],
        }
    }

    getStoreLocatorDropdown(){
        return(
            <div>
                <select>
                     <option value="" hidden>Select product/service type</option>
                    {
                        this.state.options.map((obj) => {
                            return <option value={obj.id} changeOption={this.handleChange}>{obj.name}</option>
                        })
                    }
                </select>
            </div>
        )
    }

    handleChange(){
        console.log("clicked")
    }


    async componentDidMount(){
        let storeLocatorQuery = StoreLocatorInstance.getStoreLocator()
        await fetchQuery(storeLocatorQuery).then((data) => {
           this.setState({
               options : data.storeLocatorLocations.items
           })
           this.getStoreLocatorDropdown()
        },
        (error) => console.log(error)
        )
        
    }

    render() {
        return (
            <div>
                <h1>Store Locator</h1>
                <div>
                    {this.getStoreLocatorDropdown()}
                </div>
            </div>
        )
    }
}

export default StoreLocator

How to display option only once when it's values are repeated. And how to make it clickable and display its related data

Answer 1

Seems like what you are trying to do is to only show the unique/distinct options in the drop down list.

One of the manual way you can resolve this is to filter your options datasource first. In your case, it is the "this.state.options"

Inside your "componentDidMount" function, you can filter it before setting the value into your state:

 var data = [
  { id: 1, name: 'Partsandservices' }, 
  { id: 2, name: 'Partsandservices' }, 
  { id: 3, name: 'Petromin' }
];

data.map(item => item.name)
  .filter((value, index, self) => self.indexOf(value) === index)
// this should return you ["Partsandservices", "Petromin"]

However, this is not a recommended approach, as the root cause of this duplication should be resolved from the deepest level, which is from the "StoreLocatorInstance.getStoreLocator()".

Since the options returned are repeated name on "Partsandservices", does it contains different meaning?

Maybe Partsandservices in Location A and Partsandservices in Location B? Or was it a mistake for returning two same names to your application?

You should check on that.

Answer 2

To stop duplicate values from being displayed on your options list you can add an additional array(duplicateCheck) which would make sure that the values are not repeating
in your options list:

let duplicateCheck=[];

 this.state.options.map((obj) => {
if(duplicateCheck.includes(obj.name))
{
 return (null); 
}
else
{
duplicateCheck.push(obj.name);  
return <option value={obj.id} changeOption={this.handleChange}>{obj.name}</option>}

} 
                  

  })