JS+React Object not conserved in value attribute of <option> tag

Question

I have a drop down list that is fetched from an online DB, and loops through the list, allStaff as follows:

      <select onChange={handleChange}  className="select-css">    
                <option disabled  defaultValue selected>Select Name</option>

                {allStaff.map(person=>(
                    <option value={person} key={person._id}>{person.name}</option>
                ))}
      </select>

My handleChange function sets my stateless state, person, as follows:

const handleChange = event => {
    person = event.target.value;
}

So when I try to extract parts of person it seems to register as a string equal to [object Object], which I've checked through console logging, e.g. I'll try person.name and will get an error. What have I missed out the stops me from writing person as the person object? for reference, allStaff comes in correctly as:

[
  {
  "_id": "5ec63e97516541c07c2b26d3",
  "name": "Bob the builder",
  "clockedIn": false
 },
 {
  "_id": "5ec68b41307f0b002436234a",
  "name": "Bobby turner",
  "clockedIn": false,
  "time": "1333"
 },
 {
  "_id": "5ec68b4d307f0b002436234b",
  "name": "Bobby timer",
  "clockedIn": true
 }
]

Answer 1

The option's value should be a string,

<select onChange={handleChange}  className="select-css">    
            <option disabled  defaultValue selected>Select Name</option>

            {allStaff.map(person=>(
                <option value={person._id} key={person._id}>{person.name}</option>
            ))}
  </select>

Then in your handleChange you should have something like that :

const handleChange = event => {
   personId = event.target.value;
   person = allStaff.find(staff=>staff._id === personId)
}