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>

you are sending value={agent.agentId} that is wrong , send agent instead — Ayan Mehta
– Ayan Mehta, Commented Jul 13, 2022 at 6:27
I used JSON.stringify in the value but I am getting a string value of '{"agent":"Ricin toxin","agentId":"8"}' when I need to referenced each individual key @AyanMehta — kjamp
– kjamp, Commented Jul 13, 2022 at 6:42
try const newCapabilities = { agent: agents.find(a => a.agentId == agent)?.name } — iamhuynq
– iamhuynq, Commented Jul 13, 2022 at 6:46
this returns back as undefined but how can I use this elsewhere? i understand why but the string value being returned from the form is the object string i put above. @iamhuynq — kjamp
– kjamp, Commented Jul 13, 2022 at 6:56

iamhuynq · Accepted Answer · 2022-07-13 08:17:54Z

1

You can find the selected agent and get the name value

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

answered Jul 13, 2022 at 8:17

iamhuynq

5,5572 gold badges17 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

denOldTimer · Accepted Answer · 2023-09-19 06:32:24Z

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.....
}

Collectives™ on Stack Overflow

Passing Multiple Values in Select Option in React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related