Actualmente estoy renderizando tres botones usando un método .map en React. Los botones se extraen de una matriz en un useState.
Cuando se hace clic, los botones tienen una clase .active agregada.
¿Cómo puedo configurar el primer elemento para que tenga la clase .active cuando la página se carga por primera vez?
Código actual: https://codesandbox.io/s/recursing-lake-oetxj?file=/src/App.js
Intenté establecer el primer objeto activo en una variable establecida, pero no funcionó. También intenté usar otro estado de uso, pero no pude averiguar cómo vincular los dos. También probé un useEffect para cargar el estado inicial en el primer renderizado, pero tampoco pude descubrir cómo vincularlo.
¿Qué hay de hacer algo como esto:
function toggleActiveStyles(index, id) { if (buttons.activeObject) { return id === buttons.activeObject.id ? "active" : "inactive"; } else { return index === 0 ? "active" : "inactive"; } } y en HTML . :
{ buttons.objects.map((elements, index) => ( <button key={index} className={toggleActiveStyles(index, elements.id)} onClick={() => toggleActive(index)} > {elements.name} </button>o Demo en vivo :
Manifestación
En mi opinión, deberías usar los id de tus objetos para identificarlos como activos o no, te hará la vida más fácil:
cuando intenta definir sus clases, está comparando referencias del objeto activo y sus elementos, por lo que es difícil tener uno activo predeterminado, usando ids (número), puede comparar los valores más fácilmente.
Aquí hay un refactor usando ids: https://codesandbox.io/s/elegant-buck-z7ter?file=/src/App.js
Puedes hacerlo con useEffect()
useEffect(() => { toggleActive(0); }, []);https://codesandbox.io/s/vigilant-hopper-4we6k?file=/src/App.js