How to display its respective address when an item is selected from drop-down

I have a drop-down when I select the option from a drop-down then it has to render the address of that value. I have the drop-down as shown in image

I have below image as an array structure

The issue I am facing is when I select an option partsandservices its displays the data of other options also. I have tried this below component when and I dont know where the mistake is

    class StoreLocator extends PureComponent {      constructor(props) {          super(props)          this.state = {              options : [],              storeData: [],              selectStoreType: ''          }          this.handleChange = this.handleChange.bind(this)      }          getStoreLocatorDropdown(){          let duplicateCheck=[];          return(              <div>                  <select onChange={this.handleChange}>                       <option value="" hidden>Select product/service type</option>                      {                          this.state.options.map((obj) => {                              if(duplicateCheck.includes(obj.name)){                                  return (null)                              }                              else{                                  duplicateCheck.push(obj.name);                                    return <option value={obj.name}>{obj.name}</option>                              }                          })                      }                  </select>              </div>          )      }        handleChange(e){          this.setState({              selectStoreType: e.target.value          })      }        displayStoreLocations(){          const storeLocations = this.state.selectStoreType            if(!storeLocations){              return null          }else{              return this.getStoreLocations()          }      }          async componentDidMount(){          let storeLocatorQuery = StoreLocatorInstance.getStoreLocator()          await fetchQuery(storeLocatorQuery).then((data) => {             this.setState({                 options : data.storeLocatorLocations.items,                 storeData : data.storeLocatorLocations.items             })             this.getStoreLocatorDropdown()          },          (error) => console.log(error)          )       }        getStoreLocations(){          return(              <div>                  {                      this.state.storeData.map((obj, index) => {                          return(                              <div>                                  <p key={index}>{obj.name}</p>                                  <p key={index}>{obj.address}</p>                                  <p key={index}>Tel : {obj.phone}</p>                                  <button>VIEW ON MAP</button>                                  <button>VIEW DETAILS</button>                              </div>                          )                      })                  }              </div>          )      }        render() {          return (              <div>                  <h1>Store Locator</h1>                  <div>                      {this.getStoreLocatorDropdown()}                  </div>                  <div className="StoreLocator_SearchStore">                      <input type="text" placeholder="Enter city, post code" className="StoreLocator_Input" />                  </div>                  <div className="StoreLocator_SearchStore">                      <button type="submit">SEARCH</button>                  </div>                  <div>                      {this.displayStoreLocations()}                  </div>                  <div>Selected value is : {this.state.selectStoreType}</div>              </div>          )      }  }  

In the above component the componentDidMount() contains the data fetched from the query and it is passed to the getStoreLocator() and from there the drop-down is displayed. The handleChange() is called when I select the option. How do I solve it?

I have tried this answer it displays the option I selected but not able to render the data I want

https://stackoverflow.com/questions/67386447/how-to-display-its-respective-address-when-an-item-is-selected-from-drop-down May 04, 2021 at 10:08PM