Estoy aprendiendo React y creo que me falta algo fundamental con la actualización de los componentes de estado/renderizado.

 const allFalse = new Array(data.length) const allTrue = new Array(data.length) allFalse.fill(false) allTrue.fill(true) const [memoryStatus, setMemoryStatus] = useState(allFalse) const [baseValue, setBaseValue] = useState(false)

El juego de memoria tiene 5 cartas en este punto (apenas aprendiendo aquí) y dependiendo del estado de la memoria se determina si se muestra un lado u otro lado (verdadero/falso).

Cuando hago clic en una tarjeta, obviamente quiero cambiar el valor de esa tarjeta en la matriz. Estoy haciendo eso con esta función:

 const handleChange = (position) => { const newMemoryStatus = memoryStatus.map((item, index) => { if(index === position) { return !item } else return item } ) // i really dont understand why this does not change the state setMemoryStatus[newMemoryStatus] }

La parte de renderizado es:

 <div className={styles.container}> {data.map((item, index) => { return ( <div key={index} onClick={() => {handleChange(index)}} className={styles.card} > {!memoryStatus[index] && <Image src={item.img} width="100px" height="100px" />} <span> <center> {memoryStatus[index] ? item.latinName : ''} </center> </span> </div> )}) } </div>

En caso de que importe, mis datos se ven así:

 const data = [ { name: 'Staande geranium', latinName: 'Pelargonium zonate', img: '/../public/1.png' }, { name: 'Groot Afrikaantje', latinName: 'Tagetes Erecta', img: '/../public/2.png' }, { name: 'Vuursalie', latinName: 'Salvia splendens', img: '/../public/3.png' }, { name: 'Kattenstaart', latinName: 'Amaranthus caudatus', img: '/../public/4.png' }, { name: 'Waterbegonia', latinName: 'Begonia semperflorens', img: '/../public/5.png' }]

Qué estoy haciendo mal ??