Capture individual select drop-down values when data is nested inside an array

Question

I'm having trouble selecting/capturing individual select options when they are nested inside an array. Right now, when one select option is clicked in any of the array elements, all of the options change to that value.

Right now my setup is pretty standard for what would work with an individual drop-down select input. I'm not sure how to go forward with fixing the issue.

Here's my set up:

const array = [
  { thing: "itemone", thingArr: [1, 2, 3, 4] },
  { thing: "itemtwo", thingArr: [1, 2, 3, 4] },
  { thing: "itemthree", thingArr: [1, 2, 3, 4] },
  { thing: "itemfour", thingArr: [1, 2, 3, 4] }
];

function App() {
  const [quantity, setQuantity] = useState(1);

  const onSelectChange = e => {
    setQuantity(e.target.value);
  };

  return (
    <div className="App">
      {array.map(item => (
        <div key={item.thing}>
          <p>{item.thing}</p>
          <select value={quantity} onChange={onSelectChange}>
            {item.thingArr.map(option => (
              <option key={option} value={option}>
                {option}
              </option>
            ))}
          </select>
        </div>
      ))}
    </div>
  );
}

Again, I want only the select option that is being clicked on to change; right now they all change when any given select option is clicked.

Answer 1

You have to store in state the selected item for each thing (dropdown).

Here is a code snippet of a working component:

const array = [
  {thing: 'itemone', thingArr: [1, 2, 3, 4]},
  {thing: 'itemtwo', thingArr: [1, 2, 3, 4]},
  {thing: 'itemthree', thingArr: [1, 2, 3, 4]},
  {thing: 'itemfour', thingArr: [1, 2, 3, 4]},
]

function App() {
  const [selectedItems, updateQuantities] = useState({})

  const onSelectChange = thing => e => {
    updateQuantities({
      ...selectedItems,
      [thing]: e.target.value
     })
  }

  return (
    <div className="App">
      {array.map(item => (
        <div key={item.thing}>
          <p>{item.thing}</p>
          <select value={selectedItems[item.thing]} onChange={onSelectChange(item.thing)}>
            {item.thingArr.map(option => (
              <option key={option} value={option}>
                {option}
              </option>
            ))}
          </select>
        </div>
      ))}
    </div>
  )
}

The same code you can find it working properly on https://codesandbox.io/s/react-codesandbox-ge41g

Update: another implementation of onSelectChange arrow function

  const onSelectChange = (thing, e) => {
    updateQuantities({
      ...selectedItems,
      [thing]: e.target.value
     })
  }
  ...
  return (
    ...
    <select value={selectedItems[item.thing]} onChange={(e) => onSelectChange(item.thing, e)}>
    ...
  );