title: Bootstrap dropdowns in ReactJS, only one open at a time
body: <p>I have a page contains multiple Bootstrap Cards and each card is a component and each card footer is also a component. Card Footer contains buttons. When you click on a button, drop down will be opened like below</p>
  
  <p><a href="https://i.stack.imgur.com/pYXTR.png" rel="noreferrer"><img src="https://i.stack.imgur.com/pYXTR.png" alt="enter image description here"></a></p>
  
  <p>At any point of time when I click on a button, other drop downs should be in closed state. But its happening like this...</p>
  
  <p><a href="https://i.stack.imgur.com/yNbpp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/yNbpp.png" alt="enter image description here"></a></p>
  
  <p>Requirement: One more thing is when I click on the same button, the respective drop down should be closed.</p>
  
  <p>Requirement: When I click on any item inside drop down the respective drop down should be closed</p>
  
  <p>My Architecture is like below</p>
  
  <p><a href="https://i.stack.imgur.com/Oljfh.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Oljfh.png" alt="enter image description here"></a></p>
  
  <h2>HOME PAGE COMPONENT CODE -START</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class HomePage extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        items: [],
        activatedIdStoredInParent: ""
      };
    }
    toggleCountersMenu = (name) =&gt; {
      var name1 = name;
      this.setState((prevState) =&gt; {
        return {
          activatedIdStoredInParent: name1
        }
      });
    } 
  
    render() {
     
      const products = this.state.items.map((item, index) =&gt; {     
        return &lt;div&gt;
          &lt;Card
            product={item}
            activatedIdStoredInParent={this.state.activatedIdStoredInParent}
            toggleCountersMenu={this.toggleCountersMenu}
          &gt;
          &lt;/Card&gt;;
        &lt;/div&gt;
      });
  
      return (
        &lt;div&gt;
          &lt;div className="card-columns"&gt;
            {products}
          &lt;/div&gt;
        &lt;/div &gt;
      );
    }
  }
  
  export default HomePage;</code></pre>
  </div>
  </div>
  </p>
  
  <h2>HOME PAGE COMPONENT CODE - END</h2>
  
  <h2>CARD COMPONENT CODE - START</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class Card extends React.Component {
      handleActionClick = (name) =&gt; {
          this.props.toggleCountersMenu(name);
      }
      render() {
          return (
              &lt;div key={this.props.product.name}&gt;
                  &lt;CardHeader product={this.props.product}  /&gt;
                  &lt;CardBody product={this.props.product}  /&gt;
                  &lt;CardFooter
                      product={this.props.product}                    
                      onActionItemClick={this.handleActionClick}
                      activatedIdStoredInParent={this.props.activatedIdStoredInParent}
                  /&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default Card;</code></pre>
  </div>
  </div>
  </p>
  
  <h2>CARD FOOTER COMPONENT CODE - START</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class CardFooter extends React.Component {
  
      handleActionItemClick = (name) =&gt; {
          this.props.onActionItemClick(name);
      }
  
      render() {
          console.log('Card Footer Drop Down comp rendered');
          return (
              &lt;div className=" card-footer text-center"&gt;
                  &lt;ButtonDropdown text="F" className="danger"
                      product={this.props.product}
                      onActionItemClick={this.handleActionItemClick}
                      activatedIdStoredInParent={this.props.activatedIdStoredInParent}
                  &gt;&lt;/ButtonDropdown&gt;            
              &lt;/div&gt;
          );
      }
  }
  
  export default CardFooter;</code></pre>
  </div>
  </div>
  </p>
  
  <h2>ButtonDropdown COMPONENT CODE - START</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class ButtonDropdown extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              open: false,
              show: ' none',
              localActivatedId: 'none'
          }
      }
      toggleOpen = (e) =&gt; {
          var name = e.target.name;
  
          this.setState((prevState, props) =&gt; {
              var item = {
                  localActivatedId: name
              }
              if (props.activatedIdStoredInParent === name) {
                  if (prevState.show === ' show') {
                      item.show = ' none';
                  }
                  else {
                      item.show = ' show';
                  }
              }
              return item;
          });
          this.props.onActionItemClick(name);
      }
  
      numberClick = (e) =&gt; {
          var qty = e.target.innerText;
          this.setState((prevState, props) =&gt; {
              var item = {
                  show: ' none'
              }
              return item;
          });
      }
      render() {
          return (
              &lt;div className="btn-group" &gt;
                  &lt;button type="button" className={`btn btn-${this.props.className}  mr-1`} name={this.props.product.name + '$$' + this.props.text} onClick={this.toggleOpen}&gt;
                      {this.props.text} (classAdded={this.state.show})
                  &lt;/button&gt;
                  
                  &lt;div className={`dropdown-menu ${this.state.show}`}&gt;
                      &lt;span className="dropdown-item cursor-pointer " onClick={this.numberClick}&gt;
                          -1
                      &lt;/span&gt;
                      &lt;span className="dropdown-item cursor-pointer" onClick={this.numberClick}&gt;
                          -2
                      &lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
  
  
          );
      }
  }
  
  export default ButtonDropdown;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I add multiple buttonDropdown components in Card Footer the end product is like this. How can I close other dropdowns.</p>
  
  <p><a href="https://i.stack.imgur.com/qbziw.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qbziw.png" alt="enter image description here"></a></p>
  
  <p>I would like to know is my architecture is correct.. I am not using Redux/Flux etc..</p>