как создать множественное значение выберите в reactjs

Question

Я новичок, чтобы отреагировать, и я хотел бы создать select, как на изображении ниже,

Я знаю, как создать нормальный select.

<select >
  <option value="volvo">Volvo</option>
</select>

Но я не знаю, как создать select, который читает значения от объекта внутри this.state, который структурирован как:

state: { "first_one": "All accounts", "second_one": "second property", "third_one": "All Web Site Data"}

Я хочу показать значения в виде этого Select. При нажатии на кнопку «Выбрать» я открою модальное окно, и мне не нужно показывать раскрывающийся список. Я не знаю, как это сделать. Есть ли в reactJS библиотеки для достижения этой цели. Пожалуйста, помогите мне с некоторыми решениями.

Answer 1

Следующее должно работать. По сути, вы сохраняете все свои параметры в том состоянии, о котором уже упоминали, и присваиваете каждому из них значение и имя, которое хотите, чтобы оно отображалось. Состояние activeItem содержит текущее состояние выбора и обновляется с помощью события onChange.

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    activeItem: '',
        items: [
        {
        value: "allAccounts",
         name: "All accounts"
        },
        {
        value: "secondProperty",
         name: "Second Property"
        },
        {
        value: "allWebsites",
         name: "All Web Site Data"
        }
      ]
    }
  }

  componentDidMount() {

  this.setState({activeItem: this.state.items[0].value})
  }

  render() {
  const {items, activeItem } = this.state;
    return (
      <div>
      <select onChange={(e) => this.setState({activeItem: e.target.value})}>
        {items.length && items.map((item, index) => {
                return <option key={index} value={item.value}>{item.name}</option>;    
        })}
        </select>
        <div>Active Item: {activeItem}</div>
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

```