React Router: clicking on mapped items to a new page

Question

I'm working on an ecommerce site. Currently, I have a page which maps over all of the items from the API and displays them on screen.

I'm trying to make it so that when one of the mapped items is clicked, the user will be taken to a new page ("Item") featuring just that item. I'm using React Router, but it's not working.

Any advice to get me in the right direction on how to implement this would be appreciated.

Please specifically see the return statement and how I added the Link routers.

import React, { useState, useEffect } from 'react';
import './../App.css';
import * as ReactBootStrap from 'react-bootstrap';
import {Link} from 'react-router-dom';

function Shop() {

const [products, setProducts] = useState([]);
const [filterProducts, setFilteredProducts] = useState([]);
const [item, setItem] = useState('');
const [currentSort, setCurrentSort] = useState('');
const [loading, setLoading] = useState(false);

useEffect(async () => {
  fetchItems();
}, [])

const fetchItems = async () => {
  const data = await fetch('https://fakestoreapi.com/products');
  const items = await data.json();
  setProducts(items)
  setLoading(true)
}
function priceUSD(change){
  return change.toFixed(2)
}

useEffect(() => {
  const filteredItems = products.filter((a) => {
    if (item === '') {return a} else {return a.category === item}
  });
  setFilteredProducts(filteredItems);
}, [item, products])

 useEffect(() => {
  if (currentSort === '') {
    return
  }
  const sortedItems = filterProducts.sort((a, b) => {
    return currentSort === 'ASE' ? a.price - b.price : b.price - a.price
  });
  setFilteredProducts([...sortedItems]);
}, [currentSort])


    return (
        <div>
          <div className="itemSort">
            <p onClick={() => setItem("")}>All items</p>
            <p onClick={() => setItem("men clothing")}>Men clothing</p>
            <p onClick={() => setItem("women clothing")}>Women clothing</p>
            <p onClick={() => setItem("jewelery")}>Jewelery</p>
            <p onClick={() => setItem("electronics")}>Electronics</p>
          </div>

          <div className="itemSort">
            <p>Order by price</p>
            <p onClick={() => setCurrentSort('DESC')}>Highest</p>
            <p onClick={() => setCurrentSort('ASE')}>Lowest</p>
          </div>

            <div className="gridContainer">
              {loading ? <Link to="/Item">
                          (filterProducts.map((a, index) => (
                          <div key={index} className="productStyle">
                            <img src={a.image} className="productImage"></img>
                            <p>{a.title}</p>
                            <p>${priceUSD(a.price)}</p>
                          </div>
                        ))) </Link> : (<ReactBootStrap.Spinner className="spinner" animation="border" />)
                        }
            </div>
        </div>
    )
}

export default Shop;

Answer 1

You need a route like /item/:id to have one page for one item and assuming that a product has an id:

<div className="gridContainer">
    {loading ? 
        (filterProducts.map((a, index) => (
                  <Link to={`/Item/${a.id}`}>
                          <div key={index} className="productStyle">
                            <img src={a.image} className="productImage"></img>
                            <p>{a.title}</p>
                            <p>${priceUSD(a.price)}</p>
                          </div>
                  </Link>
            : 
         (<ReactBootStrap.Spinner className="spinner" animation="border" />)
     }
</div>