Tengo una matriz que para cada elemento de la matriz se genera dinámicamente una lista desplegable. En este momento, cada lista desplegable comparte el mismo booleano de alternancia para que todos se abran y cierren al mismo tiempo, ¿cómo puedo hacer que esto funcione individualmente?

Asigno cada objeto a un índice aquí y luego empiezo a crear menús desplegables:

{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]}
        />
      ))}

Cuando se crea el componente de opciones desplegable, paso el índice a una función:

<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>

Llegará a la siguiente función y la consola registrará el índice y luego establecerá el valor de alternancia apropiado en una matriz en verdadero / falso:

  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] });
    }
  };