'React Dropdown prop callback resets title
Working with a Dropdown but having a problem with the props callback, which resets {titlename}. I want to highlight the selected value but because of props.callback() / props.callback(key), the component or value gets reset and the selected value is not shown in {titlename}. Without callback props, this works perfectly, so that {titlename} is updated onClick. Is there a way I can set the clicked value as the title while also sending the callback?
const CategoriesDropdown = (props) => {
const eventData = props.Data;
const [dropdownOpen, setDropdownOpen] = useState(false);
const [titleName, setTitleName] = useState(props.Title);
function DropdownComponent() {
function clicked(key, name) {
if (name === titleName) {
//console.log("Same Clicked!");
props.callBack()
} else {
//console.log("Different Clicked!");
setTitleName(name);
props.callBack(key)
}
}
if (eventData)
return (
<Dropdown
isOpen={dropdownOpen}
toggle={() => setDropdownOpen(!dropdownOpen)}
>
<DropdownToggle className="btn_white_dark_border dropdown_border" button caret>
<span>{titleName}</span>
</DropdownToggle>
<DropdownMenu>
{Object.entries(eventData).map(([key, eventData], i) => (
<DropdownItem
key={i}
value={eventData[key]}
onClick={() =>
clicked(key, eventData.Name)
}
>
{(eventData.Name) + (eventData.Count)}
</DropdownItem>
))}
</DropdownMenu>
</Dropdown>
);
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
