title: How to toggle dynamically generated dropdowns using the .map functions index?
body: <p>I have a array that for every item in the array a drop down list is dynamically generated. Right now each drop down list share the same toggle boolean so they all open and close and the same time, how can I make this work individually?</p>
  
  <p>I map each object to a index here and then start creating dropdowns:</p>
  
  <pre><code>{Object.keys(props.totalWorkload.options).map((item, i) =&gt; (
          &lt;WorkloadOptions
            key={i}
            cnt={i}
            appendChoiceList={props.appendChoiceList}
            modalDropDown={props.modalDropDown}
            toggleDropDown={props.toggleDropDown}
            totalWorkloadOptions={props.totalWorkload.options[item]}
          /&gt;
        ))}
  </code></pre>
  
  <p>When the Drop Down options component is created I pass the index to a function:</p>
  
  <pre><code>&lt;div&gt;
      &lt;Dropdown isOpen={props.modalDropDown} toggle={props.toggleDropDown.bind(props.cnt)}&gt;
        &lt;DropdownToggle caret&gt;{props.totalWorkloadOptions.optionTitle}&lt;/DropdownToggle&gt;
        &lt;DropdownMenu&gt;
          {props.totalWorkloadOptions.options.map(op =&gt; (
            // tslint:disable-next-line:no-invalid-this
            // tslint:disable-next-line:jsx-no-lambda
            &lt;DropdownItem key={op} onClick= {() =&gt; props.appendChoiceList(props.totalWorkloadOptions.optionTitle, op)}&gt;
              {op}
            &lt;/DropdownItem&gt;
          ))}
        &lt;/DropdownMenu&gt;
        &lt;strong&gt; {props.totalWorkloadOptions.optionDescription} &lt;/strong&gt;
      &lt;/Dropdown&gt;
      &lt;br /&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>The it will arrrive at the following functuion and console log the index and then set the appropriate toggle value in an array to true/false:</p>
  
  <pre><code>  toggleDropDown = (index: any) =&gt; {
      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] });
      }
    };
  </code></pre>