Trabajando con un menú desplegable pero teniendo un problema con la devolución de llamada de accesorios, que restablece {titlename}. Quiero resaltar el valor seleccionado, pero debido a props.callback() / props.callback(key), el componente o valor se restablece y el valor seleccionado no se muestra en {titlename}. Sin accesorios de devolución de llamada, esto funciona perfectamente, por lo que {titlename} se actualiza onClick. ¿Hay alguna manera de establecer el valor en el que se hizo clic como título al mismo tiempo que envío la devolución de llamada?
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> ); } }