I'm facing a challenge in my React.js project while trying to implement a filter. The issue is that the list appears when I click on the button, but it doesn't disappear on the second click or if I click outside the list.
Initially, I imported the bootstrap CSS which solved the button problem but caused some styling conflicts, so I ended up commenting out the import. Can anyone assist me in resolving either of these issues?
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 ⌄" 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 ⌄">
<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 ⌄">
<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 ⌄">
<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 ⌄">
<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;
}