Как мне извлечь id в onChange? React

Question

У меня имеется массив statuses

[{rgb: "#3cb371", id: 50466, name: "Закрыта"},
{rgb: "#909090", id: 50467, name: "Отложена"},
{rgb: "#fcad51", id: 50468, name: "Согласование договора"},
{rgb: "#fcad51", id: 50469, name: "В работе"},
{rgb: "#fd5e53", id: 50470, name: "Открыта"},
{rgb: "#025969", id: 50471, name: "Выполнена"}]

Как мне получить id из выбранного option и передать его дальше в onChange?

<select
          name="status"
          value={status}
          onChange={}
        >
          {statuses.map((status) => {
            return (
              <option  key={status.id}>
                {status.name}
              </option>
            );
          })}
 </select>

e.target.id и e.currentTarget.id выдают пустое значение

Answer 1

Можно так:

import { useState } from "react";

export default function App() {   
  const [st, setSt] = useState([
    { rgb: "#3cb371", id: 50466, name: "Закрыта" },
    { rgb: "#909090", id: 50467, name: "Отложена" },
    { rgb: "#fcad51", id: 50468, name: "Согласование договора" },
    { rgb: "#fcad51", id: 50469, name: "В работе" },
    { rgb: "#fd5e53", id: 50470, name: "Открыта" },
    { rgb: "#025969", id: 50471, name: "Выполнена" }   
  ]);

  return (
    <select
      name="status"
      onChange={(e) => {
        console.log(st[e.target.selectedIndex].id);
      }}
    >
      {st.map((status) => {
        return <option key={status.id}>{status.name}</option>;
      })}
    </select> 
  );
}

БЛОГ НА HUSL

Как мне извлечь id в onChange? React

Ответы (1 шт):