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

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?

CodePudding user response：

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.

CodePudding user response：

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

CodePudding user response：

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