estoy intentando resolver un pequeño ejercicio en reactjs, soy nuevo iniciando en este framework y requiero hacer lo siguiente: Tengo cierta cantidad de DIV un ejemplo 1000. la idea es que cuando haga click en uno se cambie de color como si hiciera un focus ( esa parte ya esta hecha), lo que sigue despues es donde me complica, cuando quiero hacer click en otro div este debe hacer focus, pero el anterior debe desactivar el focus. He intentando de varias maneras pero no hayo con que logica hacerlo. espero me puedan ayudar. Gracias. En el siguiente enlace pueden ver el ejercicio: https://stackblitz.com/edit/tarjeta-focus?file=components%2FTarjeta.jsx
este es el codigo que llevo hasta el momento:
function Tarjeta({ id }) {
let cambio = id => {
let x = document.querySelectorAll("div.tarjeta");
for (let i = 0; i < x.length; i++) {
if (x[i].classList.contains("tarjeta")) {
x[id - 1].classList.add("focus");
break;
} else if (x[i].classList.contains("tarjeta focus")) {
x[id - 1].classList.remove("focus");
}
}
};
return (
<div className="tarjeta" onClick={() => cambio(id)}>
hola
</div>
);
}
export default Tarjeta;