I have a nicely working Dropdown that checks whether clicked values are the same, thanks to @David: https://codesandbox.io/s/laughing-leftpad-sepuly?file=/src/App.js
I use the Dropdown to update parameters with which I render cards in a parent component. This is sent to the parent through clicked function through setVal(id). The issue is, when I need to use more than one state, the functionality of the Dropdown breaks.
const ExploreCategoriesDropdown = ({ Title, param, setVal }) => {
const [dropdownOpen, setDropdownOpen] = useState(false);
const [titleName, setTitleName] = useState(Title);
const [data, setData] = useState([]);
useEffect(() => {
APILocalData(param)
.then((res) => {
setData(res.data)
})
}, [])
function DropdownComponent() {
function clicked(name, id) {
if (name === titleName) {
console.log("Same Clicked!");
setTitleName(Title) //When same val is clicked, titleName should default
setVal() //send empty parameter when value cleared
} else {
console.log("Different Clicked!");
setTitleName(name);
setVal(id) //send parameter value based on id prop
}
}
return (
<Dropdown
isOpen={dropdownOpen}
toggle={() => setDropdownOpen(!dropdownOpen)}
>
<DropdownToggle className="btn_white_dark_border dropdown_border" button caret>
<span className="pe-4">{titleName}</span>
</DropdownToggle>
<DropdownMenu>
{data.map((v, i) => (
<DropdownItem
key={i}
value={v.Name}
onClick={() => clicked(v.Name, v.Id)
}
>
{v.Name}
</DropdownItem>
))}
</DropdownMenu>
</Dropdown>
);
}
The problem arises when I add setVal(). I am clueless whether I should utilize useState also to handle those interactions?
Yes, you can store selected dropdown item in component state, using useState hook:
const [selectedDropdownItemId, setSelectedDropdownItemId] = useState(null);
and in the clicked function better compare ids than names.
Also you can store all data in one state, like this:
const [selectedDropdownItem, setSelectedDropdownItem] = useState(null);
and then in clicked function:
setSelectedDropdownItem({ name: name, id: id });