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

Question

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?

score 0 · Answer 1 · answered Mar 20 '22 at 06:15

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.

answered Mar 20 '22 at 06:15

Joshua Wood

435
5
18

I basically have a list of products on the main page. When I click on a specific product I want there to be another page with just that product (like amazon or ebay) but I dont know just how to that specific products details. im using commercejs to add all of my products so its an object with however many amounts of products there are. – Charlie Mar 20 '22 at 06:20
You'll have to do this in the parent component or with some routing or something. You can look into React Router or you can render the product page conditionally based on the product you're selecting. Either way, you'll have to list these products as components and add a click handler to them. What is your parent component? – Joshua Wood Mar 20 '22 at 06:31

score 0 · Answer 2 · answered Mar 20 '22 at 07:24

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

score 0 · Answer 3 · answered Mar 20 '22 at 07:42

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

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

3 Answers3