Как получить значение из выпадающего меню и отобразить его в ReactJS

#javascript #reactjs #drop-down-menu #menu

Вопрос:

Я использую react, и у меня есть выпадающее меню с цифрами 1-5. Я хочу выбрать значение одного щелчка и отобразить его в раскрывающемся меню, но я не могу отобразить значение.

Можно ли решить эту проблему без использования select или аналогичного?

 handleToggle = (clicked) => {
    this.setState(() => ({
      toggle: !this.state.toggle,
    }));
  };

  handleAmount = (e) => {
    this.setState(() => ({
      amount: e.target.value,
      toggle: !this.state.toggle,
    }));
  };

<section
          value={this.state.amount}
          onClick={this.handleAmount}
        >
          <section
            className="arrow-down"
            onClick={this.handleToggle}
          ></section>
          <section>
            <p
              value="1"
              className={`${this.state.toggleHide ? "hide" : ""}`}
            >
              1 WHALE
            </p>
            <p
              value="2"
              className={`${this.state.toggleHide ? "hide" : ""}`}
            >
              2 WHALES
            </p>
</section>
</section>
 

Комментарии:

1. Это фрагмент компонента, есть ли причина, по которой вы не можете предоставить весь свой компонент?

2. Никакой конкретной причины, просто, я думаю, в этом нет необходимости. Но я решил исправить это с помощью react-select вместо этого