React get dropdown from array of object selected when value is an object

Question

I have dropdown like this now. Its working I am getting value as I need , but how to get name in dropdown change as selected, when value is an object. Any ideas, please?

onDropdownSelected = (e) => {           
    if (e.target.value !== '') {
        const inst = JSON.parse(e.target.value)
        console.log('inst', inst)           
       }
    }


<select id="mySelect" onChange={this.onDropdownSelected}>
  {installations.map(installation => 
   <option key={installation._id} name={installation._id} value= 
   {JSON.stringify(installation)}>{installation.name}</option>)}
</select>

score 0 · Answer 1 · answered Jun 20 '18 at 12:26

To get the installation name, simply use inst.name.

I reproduced your example. Play with it a little bit and feel free to ask any related questions.

class App extends React.Component {
 onDropdownSelected = (e) => {           
  if (e.target.value !== '') {
      const inst = JSON.parse(e.target.value)
      console.log('Installation name:', inst.name);
     }
  }
  
  generateInstallations = () => [...Array(100)].map((val, i) => (
    { _id: `special-${i}`, name: `Installation #${i}` }
 ));
    
  render() {
    const installations = this.generateInstallations();
    return (
      <div>
        <h4>Select your installation:</h4>
        <select id="mySelect" onChange={this.onDropdownSelected}>
          {installations.map(installation => 
           <option
            key={installation._id}
            name={installation._id}
            value={JSON.stringify(installation)}>
            {installation.name}
           </option>
          )}
        </select>
      </div>
    );
  }
  
}

ReactDOM.render(<App />, document.getElementById('react'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="react"></div>

Thanks. I was doing something similar: const instName = inst.name this.setState({ instName: instName}) But values in dropdown was duplicating, dont now right way how to use this inst.name. — Assai, Jun 20 '18 at 13:05
@Assai I didn't get you man. What do you mean? Could you please clarify. Is the issue solved or not? — inaumov17, Jun 21 '18 at 22:42
Hi, i am facing the same issue and for some part i have resolved it from your answer about `value={JSON.stringify(installation)}` and due to this i am getting a perfect array object of what the option is selected from select tag. Now i m not able to pass those values in the API. Can you please help me in my detailed question here ? https://stackoverflow.com/q/59138730/7995957 — TMA, Dec 03 '19 at 12:20

score 0 · Answer 2 · answered Jun 25 '18 at 15:12

I did this way, made value as an index in dropdown and just assigning this index to array of object, and getting object value I need :

onDropdownSelected =(e)=>{
if (e.target.value !== '') {    
  this.setState({
    inst: this.state.installations[e.target.value]
  })    


<select onChange={this.onDropdownSelected} disabled >
        {this.state.installations.map((option, index) =>
             <option key={index} value={index}>
                 {option.name}
             </option>)}
</select>

React get dropdown from array of object selected when value is an object

2 Answers2