Dropdown меню React, не передается значение в state

Question

Есть следующее меню

Реализовано через select, option следующим образом:

const [scDay, setScDay] = useState('');

<div className="form_item">
  <select name="days" className="schedule_select">
    {days.map((item) => {
      return (
        <option
          value={item}
          onClick={() => {
            setScDay(item);
          }}
        >
          <li key={item}>{item}</li>
        </option>
      );
    })}
  </select>
</div>

По клику на выбранный пункт мне нужно получить значение в State, чтобы далее по клику на кнопку отдельную отправить все это в базу данных. Если я ставлю onClick на option, то ничего в State не помещается. Аналогично если и на li повесить событие. Как это пофиксить, чтобы значение уходило в state?

Answer 1

Получить значение можно добавив в тег select атрибут onChange и в нем вызывать функцию setScDay(e.target.value) Вот так:

<div className="form_item">
      <select onChange={(e)=> setScDay(e.target.value)} 
              name="days" className="schedule_select">
        {days.map((item) => {
          return (
            <option value={item}>
              <li key={item}>{item}</li>
            </option>
          );
        })}
      </select>
    </div>

БЛОГ НА HUSL

Dropdown меню React, не передается значение в state

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