Estoy haciendo un proyecto de plataforma de comercio electrónico pero necesito ayuda. en mi página principal tengo los productos, usé .map para iterar a través de todos ellos para representarlos a todos. Quiero que sea donde, si hace clic en un botón de un producto, lo llevará a la página de ese producto con más detalles. Mi único problema es que no sé cómo renderizar un producto y no varios. aquí está el código en el que estoy tratando de trabajar
import React from 'react'; import { Card, CardMedia, CardContent, CardActions, Typography, IconButton, Button } from '@material-ui/core'; import useStyles from './styles'; const ProductPage = ({ products, onAddToCart }) => { const classes = useStyles(); {products.map((product) => ( console.log(product) ))} return ( <Card className={classes.root}> </Card> ); }; export default ProductPage;básicamente, solo mapea todos los productos y la consola registra todos los productos. Pero solo quiero que console.log el producto en el que hice clic. ¿Cómo puedo hacer eso?
Para hacer esto, deberá enviar la ID del producto al componente. Puede usar React Router para enviar la ID del producto en la URL como parámetros.
En tus Rutas, Agrega esto para enviar ID en la URL
<Route path="/products/:id"> <Product /> </Route>Una vez que tenga la identificación del producto, puede crear una API para obtener los detalles del producto o puede filtrar la matriz de productos.
En la página de productos:
const [product, setProduct] = React.useState(); let { id } = useParams(); const getProductDetails = async (id) => { let url = `${apiUrl}/api/product/getDetailsbyId/${id}`; const response = await axios.get(url); setProduct(response.data.data[0]); }; const filterProduct = (id) => { let product = props.products.filter(product => product.id === id); setProduct(product); }; useEffect(() => { getProductDetails(id); // Or use filterProduct Function }, []);import React from 'react'; import { Card, CardMedia, CardContent, CardActions, Typography, IconButton, Button } from '@material-ui/core'; import useStyles from './styles'; const ProductPage = ({ products, onAddToCart }) => { const [selectedProduct, setSelectedProduct] = useState(null) const classes = useStyles(); return ( <> {selectedProduct ? ( <Card className={classes.root}> {selectedProduct?.name} </Card> ):( products.map((product) => ( <div onClick={() => setSelectedProduct(product)}> {product?.name} </div> )) ) } </> ); }; export default ProductPage;Pero mejor es hacer clic en un producto, saltar a una nueva página pasando id & fetch para mostrar los detalles del producto en esa nueva página con esa identificación.
Realmente no entiendo lo que estás mirando.
Si está mirando un solo producto, entonces solo debe enviar el producto que le preocupa y solo mostrar la página del producto cuando hace clic en ese producto.
Si simplemente intenta enumerar todos los productos, debe devolver un componente Product que tenga un controlador onClick que maneje sus clics.
Algo como esto:
products.map(product => <Product onClick={console.log} {/* whatever other product props here*/} /> const Product = props => { // fill in your product details here... }Pero si no estás haciendo esto, creo que estás conceptualmente confundido. De cualquier manera, creo que debería tener una lista de productos que tienen un controlador de clics y luego mostrar una página diferente cada vez que hace clic en un producto específico.