Quiero mostrar el contenido de las tarjetas (marcadas en rojo y con el nombre product.description en el código) al hacer clic, pero no sé cómo hacerlo.
El contenido de la tarjeta se obtiene del servidor JSON.
Aquí hay un código
El primer js se usa para obtener los datos del servidor y mostrarlos en la página y el segundo es el método para mostrar los datos en la página. En general, quiero que la etiqueta p aparezca y desaparezca cuando el usuario haga clic en el div principal denominado
Product-Preview
import { useEffect, useState } from "react"; import ProductList from "./ProductList"; const Products = () => { const [products, setProducts] = useState (null); useEffect (() => { fetch('http://localhost:8000/products') .then(res => { return res.json(); }) .then(data => { setProducts(data); }) }, []); return ( <div className="ProductList"> {products && <ProductList products={products}/>} </div> ); } export default Products; const ProductList = (props) => { const products = props.products; return ( <div className="ProductList" > {products.map((product) => ( <div className="Product-Preview" key={product.id}> <div className="backdrop" style={{backgroundImage: `url(${product.image})`}}></div> <h2>{ product.title }</h2> <p>{ product.description }</p> <div>{ product.price }</div><br /> </div> ))} </div> ); } export default ProductList;Debe crear un componente y usar un estado en este componente para hacerlo.
El componente de ejemplo tiene un nombre es Card
const Card= ({ product }) => { const [showDescription, setShowDescription] = useState(false); return ( <div className="Product-Preview" onClick={() => setShowDescription(!showDescription)} > <div className="backdrop" style={{ backgroundImage: `url(${product.image})` }}></div> <h2>{product.title}</h2> {showDescription && <p>{product.description}</p>} <div>{product.price}</div> <br /> </div> ); };Y usa este componente dentro del mapa.
{ products.map((product) => <Card product={product} key={product.id} />); }