将 id 和值传递给反应 js 中的 select 输入集

Question

i have this set of select input that shows numbers on intail load on select filed and then i want to change value based on the option also i want to pass a id to the post api called user.id

{
  data.map((user) => (
    <select
      value={user.numberfromapi} // to show the number that is fecteched from api in intial load
      style={{ background: defaultcolor }}
      onChange={handleBackground(user.id ,value)} // i want to pass these 2 filds
    >
      <option value="1"> 1 </option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
  ));
}

Answer 1

You can modify handleBackground to look like this.

const handleBackground = (userId) => ({ target }) => {
  let value = target.value;

  // you can use userId and value here.
}

Then in your JSX call handleBackground like this.

<select
  value={user.numberfromapi}
  style={{ background: defaultcolor }}
  onChange={handleBackground(user.id)}
>

Or do it the sloppy way like this.

<select
  value={user.numberfromapi}
  style={{ background: defaultcolor }}
  onChange={(event) => handleBackground(user.id, event.target.value)}
>