javascript - Select option with entire object as value - Stack Overflow

admin管理员组

文章数量:1353400

In my React select input, I want to iterate through my drivers array and for each driver generate the with the single driver as value. But when I console log the target value I have only a [object Object] and if I try to call, for example, driver.driverName I obtain "undefined". Why?

<label className="pt-label pt-inline">
        Autista
        <div className="pt-select">
            <select onChange={this.changeDriver}>
                <option>Scegli autista</option>
                {this.props.drivers.map((driver) => {
                    return <option key={driver.key}
                                   value={driver}>{driver.driverName} {driver.driverLastname}</option>
                                    })}
            </select>
        </div>
</label>

In my React select input, I want to iterate through my drivers array and for each driver generate the with the single driver as value. But when I console log the target value I have only a [object Object] and if I try to call, for example, driver.driverName I obtain "undefined". Why?

<label className="pt-label pt-inline">
        Autista
        <div className="pt-select">
            <select onChange={this.changeDriver}>
                <option>Scegli autista</option>
                {this.props.drivers.map((driver) => {
                    return <option key={driver.key}
                                   value={driver}>{driver.driverName} {driver.driverLastname}</option>
                                    })}
            </select>
        </div>
</label>

• javascript
• reactjs
• ecmascript-6

Share Improve this question Follow edited Nov 28, 2016 at 15:45 Arcy asked Nov 28, 2016 at 15:43 ArcyArcy 37522 silver badges1414 bronze badges 3

• Can you post the object here too? Or even better can you make a working fiddle? – Ionut Necula Commented Nov 28, 2016 at 15:44
• 1 Create your custom Option ponent and pass the driver object that ponent instance as prop. Because "value" attribute accepts string only – Tolgahan Albayrak Commented Nov 28, 2016 at 15:46
• I edited my question. Anyway, even with driverName doesn't works. – Arcy Commented Nov 28, 2016 at 15:47

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

The value of driver is a JS object, but the value attribute of <option> expects a string. Parsing an object to a string in JavaScript will result in [object Object]. You will need to store an individual key value in that space. If you need to pull a specific value from the object when that option is selected, I remend storing driver.key there and then using that as a lookup reference in your callback function.

HTML option value does only support string values. You can serialize your object to store it and deserialize it when reading.

You may stringify you data when set it to value also need to parse it when using the value inside function. Here is an example:

<Input
   type="select"
   value={progressionItem?.rankFrom}
   name="rankFrom"
   onChange={(e) => { setProgressionItem({ ...progressionItem, [e.target.name]: JSON.parse(e.target.value)._id, rankFromName: JSON.parse(e.target.value).rankName })            }} >
                  <option>Select</option>
          {
             ranks.map(rank=><option value={JSON.stringify(rank)} key={rank._id}>{rank.rankName}</option>)
                  }
                </Input>

本文标签： javascriptSelect option with entire object as valueStack Overflow