Tengo un menú desplegable que funciona muy bien y verifica si los valores en los que se hizo clic son los mismos, gracias a @David: https://codesandbox.io/s/laughing-leftpad-sepuly?file=/src/App.js
Uso el menú desplegable para actualizar los parámetros con los que represento tarjetas en un componente principal. Esto se envía al padre a través de la función de clic a través de setVal (id). El problema es que, cuando necesito usar más de un estado, la funcionalidad del menú desplegable se rompe.
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> ); }El problema surge cuando agrego setVal(). No tengo ni idea de si debo utilizar useState también para manejar esas interacciones.
Sí, puede almacenar el elemento desplegable seleccionado en el estado del componente, utilizando useState hook:
const [selectedDropdownItemId, setSelectedDropdownItemId] = useState(null);
y en la función en la que se hizo clic es mejor comparar los identificadores que los nombres.
También puede almacenar todos los datos en un estado, así:
const [selectedDropdownItem, setSelectedDropdownItem] = useState(null);y luego en la función de clic:
setSelectedDropdownItem({ name: name, id: id });