How to close the drop-down after selecting a value in react?

Question

I have used a drop-down in my React project. When I select a value I want to close it. But it doesn't automatically close. How can I do it?

Dropdown.js

import React from 'react';
import { PropTypes } from 'prop-types';
import { DropdownToggle, DropdownMenu, UncontrolledDropdown } from 'reactstrap';

import * as Icon from 'react-bootstrap-icons';

import './DropDown.scss';

/**
 * This is a reusable dropdown
 * onClick function and dropdown items come as props
 */
class DropDown extends React.Component {
  render() {
    const { dropDownItemArray, text, onClick } = this.props;
    const dropdownItems = dropDownItemArray.map((item,key) => {
      return (
        <div className="dropdown-items" onClick={onClick} >
          {item}
        </div>
      );
    });
    return (
      <div>
        <UncontrolledDropdown className="multi-select-wrapper text p4">
          <DropdownToggle className="select-dropdown">
            <div className="select-text text p4">{text}</div>
            <Icon.CaretDownFill />
          </DropdownToggle>
          <DropdownMenu name='test'>{dropdownItems}</DropdownMenu>
        </UncontrolledDropdown>
      </div>
    );
  }
}

DropDown.propTypes = {
  text: PropTypes.string,
  onClick: PropTypes.func,
  menuItemArray: PropTypes.array
};

export default DropDown;

This handles all the input values from the input fields and selected values from dropdowns.

handleChangeInputs = (event) => {
  if (event[0] === '<') {
    this.setState({
      editorHtml: event
    });
  } else {
    if (event.type === 'change') {
      this.setState({
        [event.target.name]: event.target.value
      });
    } else {
      if (event.target.parentNode.innerText[0] === 'C') {
        console.log(event);
        this.setState({
          ticketType: event.currentTarget.textContent
        });
      } else {
        console.log("test");
        this.setState({
          ticketPriority: event.currentTarget.textContent
        });
      }
    }
  }
};

This part is related to drop-down handling

if (event.target.parentNode.innerText[0] === 'C') {
  console.log(event);
  this.setState({
    ticketType: event.currentTarget.textContent
  });
} else {
  console.log("test");
  this.setState({
    ticketPriority: event.currentTarget.textContent
  });
}

Answer 1

• You could add a toggleDropdown function along with a property in your state dropdownOpen which will cause the dropdown to be open or closed:

toggleDropdown = () => {
    const dropdownOpen = this.state.dropdownOpen ? false : true;
    this.setState({ dropdownOpen: dropdownOpen})
};

• Pass toggleDropdown and dropdownOpen in the props and reference them in your code:

const { toggleDropdown, dropdownOpen } = this.props;
[...]
<UncontrolledDropdown
isOpen={dropdownOpen || false}
toggle={toggleDropdown}
>

• Your code references an onClick function but you've named your function handleChangeInputs. Here's an onClick function that would work.

onClick = (event) => {
this.setState({ ticketType: event.currentTarget.textContent }, () =>  this.toggleDropdown()}

Calling toggleDropdown inside of onClick only seems to work if it's in the callback of this.setState.