How do I get value of mapped options onChange of select dropdown in react?

Question

I have a list of option, I'm getting from the API. I'm using .map() and When I change the option I want the specific option object so I can store that inside of redux store.

            <select
              onChange={() => handleChange()}
              className="pl-2 bg-white font-medium border-none"
            >
              {outlets.map((outletItem) => (
                <option key={outletItem.outlet_id} value={outletItem.outlet_id}>
                  {outletItem.name}
                </option>
              ))}
            </select>

Here, outlets is an array from the API. I want the specific value of the array when I make a change.
handleChange()

  const handleChange = () => {
    dispatch(addSelectedOutlet(outlets));
  };

Does this answer your question? [OnChange event using React JS for drop down](https://stackoverflow.com/questions/28868071/onchange-event-using-react-js-for-drop-down) — dee, Jul 01 '21 at 12:42

score 1 · Accepted Answer · answered Jul 01 '21 at 12:29

1

You need to catch the value of onChange

onChange={(e) => handleChange(e)}

then

const handleChange = (e) => {
  console.log(e.target.value)
};

answered Jul 01 '21 at 12:29

Mohammad Faisal

2,265
1
10
16

e.target.value is the only way, cause I passed the outletItem in value and I'm getting selectedOutlet(pin):{} => '[object Object]' – Chandler Bing Jul 01 '21 at 12:46

How do I get value of mapped options onChange of select dropdown in react?

1 Answers1