Passing Multiple Values in Select Option in React

Question

I am having issues passing in two values in my select component and working in React. I am currently passing in the correct id value in the selected options.. however when I am passing to the body in newCapabilities, it is receiving a the id value (agent.agentId) instead of the intended name value (agent.agent). I need to be able to send both of the id value and name value that I am mapping through in agent.

What am I doing wrong here?

react-component.js

  const handleChangeForm = (e) => {
    const { id, value } = e.target
    setForm({
      ...form,
      [id]: value
    })
  }
      const addCapabilities = async (tableName, body) => {
        const newCapabilities = {
          agent
        }
        response(newCapabilities)
      }

      <form>
          <label>Agent</label>
          <select className='add-cap-select' id='agent' onChange={handleChangeForm}>
            <option value=''>Agent</option>
            {agents.map((agent, index) => (
              <option key={index} value={agent.agentId}>
                {agent.agent}
              </option>
            ))}
          </select>
          </form>

Answer 1

So if you need to give multiple values => create an object or send an existing object

<form>
    <label>Agent</label>
    <select 
        className='add-cap-select' 
        id='agent' 
        onChange={handleChangeForm}>
        {/* Remember to create an empty object value='{}' */}
        <option value='{}'>---- Agent ----</option>
        {agents.map((agent, index) => (
            <option key={index} value={JSON.stringify(agent)}>
                {agent.agent}
            </option>
         ))}
    </select>
</form>

And in the handleChangeForm function

const handleChangeForm = (e) => {
    let agent = JSON.parse(e.target.value);
    setAgentId(agent.agentId);
    setAgentName(agent.agentName);
    etc.....
}

Answer 2

You can find the selected agent and get the name value

const newCapabilities = {
    agent: agents.find(a => a.agentId == form.agent)?.agent
}