Estoy creando un componente React que es básicamente un menú desplegable de opciones de clasificación. Cuando un usuario hace clic en una selección de clasificación, la interfaz de usuario se actualizará de acuerdo con la selección del usuario. Se parece a esto:

Quiero mostrar la marca de verificación azul en el tipo seleccionado activamente. Sé que usar estados en React es el camino a seguir, pero tengo problemas para vincular el estado al tipo de usuario seleccionado específicamente.

Este es mi componente SortSelection.jsx :

 const SortSelection = ({ options, extraClass, handleSort, }) => { const [isActive, setActive] = React.useState(false); const handleClickSort = (e) => { const button = e.target.closest('button'); if (button) { const sort = button.getAttribute('data-sort'); if (button.classList.contains('selectionDropdown_menu--children-sort') && sort) { setActive(!isActive); } } }; return ( <div className={classList}> SORT BY: {currentSortDisplayName} <ul className="selectionDropdown_menu"> {options.map((option, index) => <li key={index} value={option.value} className="selectionDropdown_menu--children"> <Check width="20" height="20"/> <Button text={option.name} className={`selectionDropdown_menu--children-sort ${isActive ? 'active' : null}`} onClickFunc={handleClickSort.bind(this)} data-sort={option.value} data-name={option.name}/> </li>)} </ul> </div> ); };

Desafortunadamente, cuando actualizo el estado con el enlace setActive, ambos componentes obtienen la clase 'activa' en lugar del tipo real en el que el usuario hizo clic. Mi idea es mostrar/ocultar las marcas de verificación azules (comprobar componente) con CSS al verificar la existencia de la clase 'activa'.

¿Cómo puedo arreglar esto para capturar solo el tipo seleccionado real del usuario , para mostrar la marca de verificación azul? También necesito asegurarme de que en la carga de la página, se mostrará el tipo predeterminado de Más reciente, por lo que debo mostrar la marca de verificación azul correcta en la carga de la página.