React JS Bootstrap Dropdown Issue-CodePudding

I am trying to create a filter in my React.js project. However, I am having an issue where the list shows when you click on the button, but the list will not go away on the second click or if you click outside the list.

I imported the bootstrap CSS, and while that resolved the button issue, it messed with my styling, so I commented out the import. Is anyone able to help me resolve either issue?

import React, { useEffect, useState } from 'react';
// import '../bootstrap/css/bootstrap.css';
import "bootstrap/dist/js/bootstrap.min.js";
import Popper from 'popper.js';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
import './Filterbar.css';

export default function Filterbar() {
    function handlePropertyTypeChange(event){
        console.log(event.target.value);
        event = setPropteryType(event.target.value);
    };
    function handlePriceRangeChange(event){
        console.log(event.target.value);
        event = setPriceRange(event.target.value);
    };
    function handleBedroomChange(event){
        console.log(event.target.value);
        event = setBedroomQTY(event.target.value);
    };
    function handleBathroomChange(event){
        console.log(event.target.value);
        event = setBathroomQTY(event.target.value);
    };
    function handleCityChange(event){
        console.log(event.target.value);
        event = setCityChoice(event.target.value);
    };

    const [propertyType, setPropteryType] = useState('');
    const [priceRange, setPriceRange] = useState('');
    const [BedroomQTY, setBedroomQTY] = useState('');
    const [BathroomQTY, setBathroomQTY] = useState('');
    const [cityChoice, setCityChoice] = useState('');

    return (
        <div className='FilterbarBody'>

            <DropdownButton type="button" id="dropdown-basic-button" title="Property Type &#8964;" data-bs-toggle="dropdown" aria-expanded="false">
                <Dropdown.Item value={0} name="Property Type" onChange={handlePropertyTypeChange} aria-labelledby="dropdown-basic-button">All</Dropdown.Item>
                <Dropdown.Item value={1} name="Property Type" onChange={handlePropertyTypeChange} aria-labelledby="dropdown-basic-button">Single Family Home</Dropdown.Item>
                <Dropdown.Item value={2} name="Property Type" onChange={handlePropertyTypeChange} aria-labelledby="dropdown-basic-button">Multi Family Home</Dropdown.Item>
            </DropdownButton>

            <DropdownButton id="dropdown-basic-button2" title="Price &#8964;">
                <Dropdown.Item value={0} name="Price Range" onChange={handlePriceRangeChange}>All</Dropdown.Item>
                <Dropdown.Item value={500} name="Price Range" onChange={handlePriceRangeChange}>500 </Dropdown.Item>
                <Dropdown.Item value={1000} name="Price Range" onChange={handlePriceRangeChange}>1,000 </Dropdown.Item>
                <Dropdown.Item value={1500} name="Price Range" onChange={handlePriceRangeChange}>1,500 </Dropdown.Item>
                <Dropdown.Item value={2000} name="Price Range" onChange={handlePriceRangeChange}>2,000 </Dropdown.Item>
                <Dropdown.Item value={2500} name="Price Range" onChange={handlePriceRangeChange}>2,500 </Dropdown.Item>
                <Dropdown.Item value={3000} name="Price Range" onChange={handlePriceRangeChange}>3,000 </Dropdown.Item>
            </DropdownButton>

            <DropdownButton id="dropdown-basic-button3" title="Bedroom &#8964;">
                <Dropdown.Item value={0} name="Bedroom" onChange={handleBedroomChange}>All</Dropdown.Item>
                <Dropdown.Item value={1} name="Bedroom" onChange={handleBedroomChange}>1 </Dropdown.Item>
                <Dropdown.Item value={2} name="Bedroom" onChange={handleBedroomChange}>2 </Dropdown.Item>
                <Dropdown.Item value={3} name="Bedroom" onChange={handleBedroomChange}>3 </Dropdown.Item>
                <Dropdown.Item value={4} name="Bedroom" onChange={handleBedroomChange}>4 </Dropdown.Item>
                <Dropdown.Item value={5} name="Bedroom" onChange={handleBedroomChange}>5 </Dropdown.Item>
                <Dropdown.Item value={6} name="Bedroom" onChange={handleBedroomChange}>6 </Dropdown.Item>
            </DropdownButton>

            <DropdownButton id="dropdown-basic-button4" title="Bathroom &#8964;">
                <Dropdown.Item value={0} name="Bathroom" onChange={handleBathroomChange}>All</Dropdown.Item>
                <Dropdown.Item value={1} name="Bathroom" onChange={handleBathroomChange}>1 </Dropdown.Item>
                <Dropdown.Item value={2} name="Bathroom" onChange={handleBathroomChange}>2 </Dropdown.Item>
                <Dropdown.Item value={3} name="Bathroom" onChange={handleBathroomChange}>3 </Dropdown.Item>
                <Dropdown.Item value={4} name="Bathroom" onChange={handleBathroomChange}>4 </Dropdown.Item>
                <Dropdown.Item value={5} name="Bathroom" onChange={handleBathroomChange}>5 </Dropdown.Item>
                <Dropdown.Item value={6} name="Bathroom" onChange={handleBathroomChange}>6 </Dropdown.Item>
            </DropdownButton>

            <DropdownButton id="dropdown-basic-button5" title="City &#8964;">
                <Dropdown.Item value={""} name="City" onChange={handleCityChange}>All</Dropdown.Item>
                <Dropdown.Item value={"Cape Coral"} name="City" onChange={handleCityChange}>Cape Coral</Dropdown.Item>
                <Dropdown.Item value={"Fort Myers"} name="City" onChange={handleCityChange}>Fort Myers</Dropdown.Item>
                <Dropdown.Item value={"Lehigh Acres"} name="City" onChange={handleCityChange}>Lehigh Acres</Dropdown.Item>
            </DropdownButton>
        </div>
    )
}

.FilterbarBody {
    display: block;
    background-color:gainsboro;
    width: 53em;
    height: 2.50em;
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.50em;
    border: .13em solid #808080;
    font-style: 'sans-serif';
    font-size: 1.25em;
}
.FilterbarBody > .dropdown {
    display:inline-block;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    text-decoration: none;
    font-style: 'sans-serif';
}
.FilterbarBody > .dropdown > button {
    display: block;
    margin-left: 1.23em;
    margin-right: 1.23em;
    text-decoration: none;
    background-color: rgba(250, 235, 215, 0);
    padding: .75em 1.75em;
    font-size: 1em;
    list-style: none;
    border: none;
    border-radius: .50em;
}
.FilterbarBody > .dropdown > button:hover {
    background-color:rgba(250, 240, 230, 0);
    color: red;
}
.dropdown-item {
    display:block;
    text-decoration: none;
    color: white;
    background-color: black;
    border-bottom: 0.010em solid linen;
    font-style: 'sans-serif';
    font-weight: .25em;
    padding: 1em 1.75em;
}
.dropdown-item:hover {
    background-color: linen;
    color: red;
}

CodePudding user response：

I ended up using React Select, which appears to be working much more in my favor now. I have a demo below, and I will provide more updates here if I run into any issues.

import React from 'react';
import ReactDOM from 'react-dom';
import Select from 'react-select';
import './Filterbar.css'

const propertyTypeOptions = [
  { value: 'All', label: 'All' },
  { value: 'Single Family Home', label: 'Single Family Home' },
  { value: 'Multi Family Home', label: 'Multi Family Home' },
];
const propertyPriceOptions = [
  { value: 0, label: 'All' },
  { value: 500, label: '500' },
  { value: 1000, label: '1,000' },
  { value: 1500, label: '1,500' },
  { value: 2000, label: '2,000' },
  { value: 2500, label: '2,500' },
  { value: 3000, label: '3,000' },
  { value: 3500, label: '3,500' },
];
const propertyBedroomOptions = [
  { value: 0, label: 'All' },
  { value: 1, label: '1' },
  { value: 2, label: '2' },
  { value: 3, label: '3' },
  { value: 4, label: '4' },
  { value: 5, label: '5' },
  { value: 6, label: '6' },
  { value: 7, label: '7' },
  { value: 8, label: '8' },
  { value: 9, label: '9' },
];
const propertyBathroomOptions = [
  { value: 0, label: 'All' },
  { value: 1, label: '1' },
  { value: 2, label: '2' },
  { value: 3, label: '3' },
  { value: 4, label: '4' },
  { value: 5, label: '5' },
  { value: 6, label: '6' },
  { value: 7, label: '7' },
  { value: 8, label: '8' },
  { value: 9, label: '9' },
];
const propertyCityOptions = [
  { value: 'All', label: 'All' },
  { value: 'Cape Coral', label: 'Cape Coral' },
  { value: 'Fort Myers', label: 'Fort Myers' },
  { value: 'Lehigh Acres', label: 'Lehigh Acres' },
];
class RentalFilterbar extends React.Component {
  state = {
    selectedPropertyTypeOptions: null,
    selectedPriceOptions: null,
  };
  handleChangePropertyTypeOptions = (selectedPropertyTypeOptions) => {
    this.setState({ selectedPropertyTypeOptions }, () =>
      console.log(`propertyTypeOptions selected:`, this.state.selectedPropertyTypeOptions)
      );
  };
  handleChangePropertyPriceOptions = (selectedPropertyPriceOptions) => {
    this.setState({ selectedPropertyPriceOptions }, () =>
      console.log(`selectedPropertyPriceOptions selected:`, this.state.selectedPropertyPriceOptions)
      );
  };
  handleChangePropertyBedroomOptions = (selectedPropertyBedroomOptions) => {
    this.setState({ selectedPropertyBedroomOptions }, () =>
      console.log(`selectedPropertyBedroomOptions selected:`, this.state.selectedPropertyBedroomOptions)
      );
  };
  handleChangePropertyBathroomOptions = (selectedPropertyBathroomOptions) => {
    this.setState({ selectedPropertyBathroomOptions }, () =>
      console.log(`selectedPropertyBathroomOptions selected:`, this.state.selectedPropertyBathroomOptions)
      );
  };
  handleChangePropertyCityOptions = (selectedPropertyCityOptions) => {
    this.setState({ selectedPropertyCityOptions }, () =>
      console.log(`selectedPropertyCityOptions selected:`, this.state.selectedPropertyCityOptions)
      );
  };
  render() {
    const { selectedPropertyTypeOptions, selectedPropertyPriceOptions, selectedPropertyBedroomOptions, selectedPropertyBathroomOptions, selectedPropertyCityOptions } = this.state;
    return (
        <>
        <form onChange={this.handleSubmit}>
            <label>Property Type:
                <Select
                    value={selectedPropertyTypeOptions}
                    onChange={this.handleChangePropertyTypeOptions}
                    options={propertyTypeOptions}
                />
            </label>
            <label>Max Price:
                <Select
                    value={selectedPropertyPriceOptions}
                    onChange={this.handleChangePropertyPriceOptions}
                    options={propertyPriceOptions}
                />
            </label>
            <label>Min Bed:
                <Select
                    value={selectedPropertyBedroomOptions}
                    onChange={this.handleChangePropertyBedroomOptions}
                    options={propertyBedroomOptions}
                />
            </label>
            <label>Min Bath:
                <Select
                    value={selectedPropertyBathroomOptions}
                    onChange={this.handleChangePropertyBathroomOptions}
                    options={propertyBathroomOptions}
                />
            </label>
            <label>City:
                <Select
                    value={selectedPropertyCityOptions}
                    onChange={this.handleChangePropertyCityOptions}
                    options={propertyCityOptions}
                />
            </label>
        </form>
        </>
    );
  }
}
ReactDOM.render(
  <RentalFilterbar />,
  document.getElementById('root')
);

form {
    margin-left: auto;
    margin-right: auto;
    width: 70em;
}
form > label {
    display: inline-block;
    font-family: 'sans-serif';
    font-size: 1.15em;
}
form > label > .css-b62m3t-container {
    display: inline-block;
    margin-left: 0.25em;
    margin-right: 0.75em;
    width: 7.1255em;
    font-family: 'sans-serif';
    size: 2em;
}

<div id="root"></div>