Tengo el siguiente componente llamado Tarjeta:

 <article className={styles.card_container}> <input type="checkbox" className={styles.checkbox} onClick={setCheckbox}/> <div className={styles.text_container} id="txt_container"> <span> {props.number} </span> </div> </article>

Cuál debería mostrar la casilla de verificación, sin la marca - contenedor para verificar o no, con colores de fondo, depende de si esta casilla de verificación está marcada o no. Por ejemplo, cuando no está marcado, debería tener color rojo, pero cuando está marcado, negro. Para esto, decidí usar state:

 const [isChecked, setChecked] = useState(false); const setCheckbox = (e) => { if (isChecked===true){ setChecked(false); document.getElementById("txt_container").style.backgroundColor="#a81616"; }else { setChecked(true); document.getElementById("txt_container").style.backgroundColor="#000"; } }

Quería crear algunos de este tipo de componentes, así que decidí mapear esto con información de la matriz:

 {data.map(element=> <Card number={element.option} key={element.option}/>) }

(Donde los datos son una matriz con un objeto con números, la tarjeta se crea con componentes con el código anterior). El problema es que, cuando "reviso" otros componentes, solo cambia de color al principio. ¿Por qué sucedió? Agradezco cualquier ayuda.

Y hay un código css:

 .card_container { position: relative; width: 60px; height: 45px; margin: 5px; float: left; border: 2px solid #50bcf2; box-sizing: border-box; } .text_container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; line-height: 25px; transition: .5s ease; } .checkbox { position: absolute; top: 0; left: 0; width: 60px; height: 45px; opacity: 1; cursor: pointer; }

Me gustaría hacer esto por js, ¿hay otra forma de hacerlo (no por css)? ¿O tal vez puedo inyectar el color de fondo proporcionado por accesorios de, por ejemplo, una matriz al componente de la tarjeta?