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

• 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

3 Answers 3

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>