para aprender a reaccionar, estoy tratando de implementar una tienda básica.

Mi idea era tener muchas imágenes de productos. Si un usuario hace clic en la imagen de un producto, esta imagen gira y muestra algo como comentarios, calificación, etc. del producto.

Para esta pregunta, tengo 3 archivos js: Container.js (contiene todo, desde las tarjetas de productos hasta la barra de navegación, etc.), ProductList.js (devuelve la UL con todos los diferentes productos) y ItemCard.js (devuelve el producto real como LI) .

Mi objetivo es simplemente invertir el valor de backsideVisible.

Proporciono un ejemplo mínimo para una mejor comprensión:

Contenedor.js:

 function Container() { const [item, setItem] = useState([{ title: "some product title", price: "14.99$", backsideVisible: false id: 1 }]); function handleTurn(event, itemId) { //here i want to change the backsideVisible value event.preventDefault(); setItem(item.map(item => { if(item.id === itemId) { item.backsideVisible = !item.backsideVisible; } })) } return( <ProductList items={item} handleTurn={handleTurn}/> ); }

ListaProductos.js:

 function ProductList(props) { return( <ul> <CardItem items={props.items} handleTurn={props.handleTurn} /> </ul> ); }

ElementoCardItem.js

 function CardItem(props) { return( {props.items.map(item =>( <li key={item.id} onClick={event => props.handleTurn(event, item.id)}> product-image etc... </li> ))} ); }

Pero cada vez que intento esto, aparece el error "Error de tipo: no se puede acceder a la propiedad" id ", el elemento no está definido". Tan pronto como cambie el método handleTurn a algo como

 function handleTurn(event, itemId) { event.preventDefault(); console.log(itemId); }

todo funciona bien y la consola muestra la identificación del elemento en el que se hizo clic. Entonces, para mí, parece que mi función handleTurn tiene algunos errores.

¿Tienen alguna idea de dónde está mi culpa?

Su ayuda es muy apreciada. Gracias.