я есть массив, который для каждого элемента в массиве динамически генерируется выпадающий список. Прямо сейчас все выпадающие списки имеют одинаковые булевы переключатели, поэтому все они открываются и закрываются, и в то же время, как я могу сделать это по отдельности?

Я сопоставляю каждый объект с индексом здесь, а затем начинаю создавать выпадающие списки:

{Object.keys(props.totalWorkload.options).map((item, i) => (
        <WorkloadOptions
          key={i}
          cnt={i}
          appendChoiceList={props.appendChoiceList}
          modalDropDown={props.modalDropDown}
          toggleDropDown={props.toggleDropDown}
          totalWorkloadOptions={props.totalWorkload.options[item]}
        />
      ))}

При создании компонента параметров Drop Down я передаю индекс функции:

<div>
    <Dropdown isOpen={props.modalDropDown} toggle={props.toggleDropDown.bind(props.cnt)}>
      <DropdownToggle caret>{props.totalWorkloadOptions.optionTitle}</DropdownToggle>
      <DropdownMenu>
        {props.totalWorkloadOptions.options.map(op => (
          // tslint:disable-next-line:no-invalid-this
          // tslint:disable-next-line:jsx-no-lambda
          <DropdownItem key={op} onClick= {() => props.appendChoiceList(props.totalWorkloadOptions.optionTitle, op)}>
            {op}
          </DropdownItem>
        ))}
      </DropdownMenu>
      <strong> {props.totalWorkloadOptions.optionDescription} </strong>
    </Dropdown>
    <br />
  </div>

Он поступит на следующую функцию, и консоль зарегистрирует индекс, а затем установит для соответствующего значения переключателя в массиве значение true / false:

  toggleDropDown = (index: any) => {
    console.log('triggered!:' + index);
    let clicked = this.state.modalDropDownClicked;
    // tslint:disable-next-line:no-conditional-assignment
    if (clicked[index]=!clicked[index]){
      this.setState({ modalDropDownClicked: !this.state.modalDropDown[index] });
    }
  };