• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

119
Vistas
how do I render only one product intstead of all using .map?

I am making an ecommerce platform project but I need some help. on my main page I have the products, I used .map to iterate through all of them to render them all. I want it to be where if you click on a button on a product it will take you to that products page with more details. My only problem is I don't know how to render one product and not multiple. here is the code I am trying to work on

 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;

basically it just maps through all of the products and console logs all of the products. But I only want it to console.log the product that I clicked on. How do I do that?

about 3 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

To do this, you'll have to send the Product ID to the component. You can use React Router to send Product ID in URL as params.

In your Routes, Add this to send ID in the URL

  <Route path="/products/:id">
    <Product />
  </Route>

Once you have the Product ID, You can create an API to fetch Product Details or You can filter the Products array.

On Products Page:

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
}, []);

about 3 years ago · Juan Pablo Isaza Denunciar

0

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;

But better is on click a product jump into a new page by passing id & fetch to show details of product in that new page with that id

about 3 years ago · Juan Pablo Isaza Denunciar

0

I don't really understand what you're looking at.

If you're looking at a single product, then you should only send the product you're concerned about and only render the product page when you click that product.

If you're simply trying to list all the products, you should return a Product component that has an onClick handler that handles your clicks.

Some something like this:

products.map(product => <Product onClick={console.log} {/* whatever other product props here*/} />
    
const Product = props => {
  // fill in your product details here...
}

But if you're not doing this, I think you're conceptually confused. Either way, I think you should have a list of products that have a click handler and then maybe render a different page whenever you click a specific product.

about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda