title: Toggle state from custom state variables
body: <p>I have a <code>reactstrap</code> <code>Collapse</code> component that I'm trying to <code>toggle</code> <code>state</code> from an external <code>Button</code> that sits within a loop of mapped items using custom state variables.</p>
  
  <p>My question:</p>
  
  <p>Why does it only <code>open</code> and not <code>toggle</code> the <code>collapse</code> component when I have the state on my <code>openCollapse</code> method to <code>setState</code> to <code>!state.collapse</code>?</p>
  
  <p>My code:</p>
  
  <pre><code>// some_items.js (brief example)
  
  // State
  this.state = {
    toggleCollapse: false
  }
  
  // my custom state variable that I want to have toggle
  openCollapse(itemId) {
    this.setState(state =&gt; ({
      [`toggleCollapse-${itemId}`]: !state.collapse
    }));
  }
  
  // mapped item with button trigger for toggling the collapse
  &lt;div key={item.id&gt;
    &lt;Button
       onClick={() =&gt; {
          this.openCollapse(item.id);
        }}
    &gt;
      View Listed Item Info
    &lt;/Button&gt;
    //
    // Some extra content that belongs here in between..
    //
    &lt;ItemInfoCollapse 
      show={this.state[`toggleCollapse-${item.id}`]}
      item={item}
    /&gt;
  &lt;/div&gt;
  
  </code></pre>
  
  <pre><code>// My item_collapse.js
  class ItemInfoCollapse extends React.Component {
    constructor(props, context) {
      super(props, context);
      this.state = {
        collapse: false,
        isOpen: this.props.show
      };
    }
  
    componentWillReceiveProps(nextProps) {
      this.setState({ isOpen: nextProps.show });
    }
  
    toggle = () =&gt; {
      this.setState({ collapse: !this.state.collapse });
    };
  
    render() {
      return (
        &lt;Collapse isOpen={this.state.isOpen} className={this.props.className}&gt;
          // Some JSX markup
        &lt;/Collapse&gt;
      )
    }
  </code></pre>