Actualmente estoy aprendiendo React y tengo un componente funcional para un menú. Cuando se hace clic en un valor, quiero agregar la clase 'elección seleccionada' para mostrar visualmente que se ha seleccionado y asegurarme de que ningún otro botón tenga la clase. ¿Hay alguna manera de crear este comportamiento sin crear un enlace useState separado para cada selección?
Aquí está mi código:
function SortMenu(props){ const [clickedDay, setClickedDay] = useState(''); const [clickedMonth, setClickedMonth] = useState(''); const [clickedYear, setClickedYear] = useState(''); const choice = (value) =>{ props.setSort(value); switch(value){ case 'day': setClickedDay( (prevVal) => { prevVal =='' ? setClickedDay('choice-selected'): setClickedDay(''); setClickedMonth(''); setClickedYear(''); }); break; case 'month': setClickedMonth( (prevVal) => { prevVal =='' ? setClickedMonth('choice-selected'): setClickedMonth(''); setClickedDay(''); setClickedYear(''); }) break; case 'year': setClickedYear( (prevVal) => { prevVal =='' ? setClickedYear('choice-selected'): setClickedYear(''); setClickedDay(''); setClickedMonth(''); }) break; } } return( <nav className="sortmenu"> <div className={`${clickedDay} choice`} onClick={() => {choice("day");}}>Day</div> <div className={`${clickedMonth} choice`} onClick={() => {choice("month")}}>Month</div> <div className={`${clickedYear} choice`} onClick={() => {choice("year")}}>Year</div> </nav> ) }Actualmente, mi código funciona, pero si necesito agregar más opciones, no solo tengo que agregar otro caso, sino también agregar las nuevas opciones en los casos existentes. Me pregunto si hay una manera más fácil o mejor de implementar este comportamiento.
Aquí hay un ejemplo práctico de la solución que describí en los comentarios.
const { useState } = React; const SortMenu = () => { const [clickedChoice, setClickedChoice] = useState(''); const choice = (value) => { setClickedChoice(prev => prev === value ? '' : value); }; return ( <nav> <div className={`${clickedChoice === 'day' ? 'choice-selected' : ''} choice`} onClick={() => choice('day')} >Day</div> <div className={`${clickedChoice === 'month' ? 'choice-selected' : ''} choice`} onClick={() => choice('month')} >Month</div> <div className={`${clickedChoice === 'year' ? 'choice-selected' : ''} choice`} onClick={() => choice('year')} >Year</div> </nav> ) } ReactDOM.render(<SortMenu/>, document.querySelector('#root')); .choice { border: 1px solid black; padding: 2px; } .choice-selected { background-color: pink; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> Click an option to de/select it. <div id="root"></div>