title: reactjs dropdown close the open menu
body: <p>I transfer the data with the API on the table.
  For each record there is a dropdown menu on the table.
  Dropdown menu.
  But drop-down menus do not close.
  So when I click on an empty place on the table, the drop-down menu does not close.</p>
  
  <p>I want the drop-down menu to close.</p>
  
  <p>that is, how to set toggle status.
  can you help with this?</p>
  
  <pre><code>&lt;buttondropdown
  isOpen = {this.state.table_dropdownMap.get (item.id)}
  toggle = {this.table_dropdownToggle}
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Ft5Rv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ft5Rv.png" alt="enter image description here"></a></p>
  
  <pre><code>import React, { Component } from "react";
  import withAuth from "../../components/helpers/withAuth";
  import {
    Card,
    CardBody,
    CardHeader,
    Col,
    Row,
    Table,
    DropdownItem,
    DropdownMenu,
    DropdownToggle,
  } from "reactstrap";
  import { connect } from "react-redux";
  import ButtonDropdown from "reactstrap/es/ButtonDropdown";
  
  
  class CustomerDebt extends Component {
    constructor(props) {
      super(props);
  
      this.domain = `http://127.0.0.1:8000`;
  
      this.state = {
        top_dropdownOpen: false,
        table_dropdownOpen: false,
        table_dropdownMap: new Map(),
  
        modal: false,
        isLoaded: true,
  
        items: [],
        selectedItem:{ }
      };
  
      this.top_dropdownToggle = this.top_dropdownToggle.bind(this);
      this.table_dropdownToggle = this.table_dropdownToggle.bind(this);
  
      this.debtModalForm = this.debtModalForm.bind(this);
      this.handleChange = this.handleChange.bind(this);
  
      this.handleSubmitUpdate = this.handleSubmitUpdate.bind(this);
      this.handleSubmitCreate = this.handleSubmitCreate.bind(this);
    }
  
    //Customer debts unmounts - refresh problem
    abortController = new AbortController();
    componentWillUnmount = () =&gt; {
      this.abortController.abort();
    };
  
  
    //Get customer debts
    async componentDidMount() {
  
      await fetch(
          `${this.domain}/api/debt/list?customer=` +
          this.props.customerInfo.customer.id,
          {
            headers: {
              Authorization: `Bearer ${localStorage.getItem("id_token")}`,
              "Content-Type": "application/json"
            }
          }
      )
          .then(res =&gt; {
            if (res.ok) {
              return res.json();
            } else {
              return res.json().then(err =&gt; Promise.reject(err));
            }
          })
          .then(json =&gt; {
            this.setState({
              items: json
            });
            this.abortController.abort();
            // console.log(json)
          })
          .catch(error =&gt; {
            //console.log('request failed:', error);
            return error;
          });
    }
  
  
    debtModalForm (value) {
      console.log( value);
  
      if (value === "newRecord") {
        this.setState( prevState =&gt;({
          modal: !prevState.modal,
        }))
      } else {
  
        console.log(value);
  
        this.setState(prevState =&gt; ({
          modal: !prevState.modal,
  
          selectedItem: value,
  
          user: value.user,
          customer: value.customer,
          debtKey: value.debtKey,
          createduserKey: value.createduserKey,
          totalDebt: value.totalDebt,
          receivedAmount: value.receivedAmount,
          description: value.description,
          paymentDate: value.paymentDate
        }));
      }
  
    }
  
  
    //text handleChange
    handleChange(e) {
      this.setState({
        [e.target.name]: e.target.value
      });
    }
  
  
    //dropdown toggle menu
    top_dropdownToggle = () =&gt; {
      this.setState(prevState =&gt; ({
        top_dropdownOpen: !prevState.top_dropdownOpen,
      }));
    };
  
    //table dropdown menü
    table_dropdownToggle ()  {
      this.setState(prevState =&gt; ({
        table_dropdownOpenMap: !prevState.table_dropdownOpenMap,
      }));
  
      console.log(this.state.table_dropdownOpenMap)
    };
  
  
  
  render() {
      const { isLoaded, items } = this.state;
      if (!isLoaded) {
        return &lt;div&gt;Loading...&lt;/div&gt;;
      } else {
        return (
            &lt;div className={"animated fadeIn container-fluid"}&gt;
              &lt;Row&gt;
                &lt;Col&gt;
                  &lt;Card&gt;
                    &lt;CardHeader&gt;
                      &lt;i className="fa fa-align-justify" /&gt; Customer Debt
                    &lt;/CardHeader&gt;
                    &lt;CardBody&gt;
                      &lt;Table hover bordered striped responsive size="sm"&gt;
                        &lt;thead&gt;
                        &lt;tr&gt;
                          &lt;th width={"10"} /&gt;
                          &lt;th width={"15"}&gt;No&lt;/th&gt;
                          &lt;th style={{ display: "none" }}&gt;User&lt;/th&gt;
                          &lt;th style={{ display: "none" }}&gt;Key&lt;/th&gt;
                          &lt;th style={{ display: "none" }}&gt;CreatedUserKey&lt;/th&gt;
                          &lt;th width={"40"}&gt;Total Debt&lt;/th&gt;
                          &lt;th width={"40"}&gt;Received Amount&lt;/th&gt;
                          &lt;th scope={"row"}&gt;Description&lt;/th&gt;
                          &lt;th width={"20"}&gt;Payment Date&lt;/th&gt;
                        &lt;/tr&gt;
                        &lt;/thead&gt;
                        &lt;tbody&gt;
  
                        {items.map(item =&gt; {
                          return (
                              &lt;tr key={item.id}&gt;
  
                                &lt;td &gt;
                                  &lt;ButtonDropdown
                                      isOpen={  this.state.table_dropdownMap.get(item.id) }
                                      toggle={  this.table_dropdownToggle }
  
                                      onClick={ () =&gt; {
                                        let updatedMap = new Map(this.table_dropdownMap);
                                        updatedMap.set(item.id, !updatedMap.get(item.id));
                                        this.setState({ table_dropdownMap: updatedMap });
  
                                        console.log("clicked : "+ item.id)
                                      }}
                                  &gt;
                                    &lt;DropdownToggle caret &gt;
                                      Process
                                    &lt;/DropdownToggle&gt;
                                    &lt;DropdownMenu&gt;
                                      &lt;DropdownItem &gt;New Record&lt;/DropdownItem&gt;
                                      &lt;DropdownItem &gt;Print All&lt;/DropdownItem&gt;
                                      &lt;DropdownItem&gt;Action 3&lt;/DropdownItem&gt;
                                      &lt;DropdownItem divider /&gt;
                                      &lt;DropdownItem&gt;Another Action&lt;/DropdownItem&gt;
                                    &lt;/DropdownMenu&gt;
                                  &lt;/ButtonDropdown&gt;
                                &lt;/td&gt;
                                &lt;td&gt;{item.id}&lt;/td&gt;
                                &lt;td style={{ display: "none" }}&gt;{item.user}&lt;/td&gt;
                                &lt;td style={{ display: "none" }}&gt;{item.debtKey}&lt;/td&gt;
                                &lt;td style={{ display: "none" }}&gt; {item.createduserKey} &lt;/td&gt;
                                &lt;td&gt;{item.totalDebt}&lt;/td&gt;
                                &lt;td&gt;{item.receivedAmount}&lt;/td&gt;
                                &lt;td&gt;{item.description}&lt;/td&gt;
                                &lt;td&gt;{new Date(item.paymentDate).toLocaleString()}&lt;/td&gt;
                              &lt;/tr&gt;
                          )
                        })}
                        &lt;/tbody&gt;
                      &lt;/Table&gt;
                    &lt;/CardBody&gt;
                  &lt;/Card&gt;
                &lt;/Col&gt;
              &lt;/Row&gt;
            &lt;/div&gt;
        );
      }
    }
  }
  const mapStateToProps = state =&gt; {
    return state;
  };
  export default connect(mapStateToProps)(withAuth(CustomerDebt));
  </code></pre>