Breaking News: Grepper is joining You.com. Read the official announcement!

how to make single product url in react

Bimlendra Ray answered on November 6, 2022 Popularity 3/10 Helpfulness 3/10

answer how to make single product url in react

how to make single product url in react

Comment

function FeaturedProduct(props) {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetchProducts();
  }, []);

  function fetchProducts() {
    axios
      .get("https://shoppingapiacme.herokuapp.com/shopping")
      .then((res) => {
        console.log(res);
        setProducts(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }
  return (
    <div>
      <h1> Your Products List is shown below:</h1>
      <div className="item-container">
        {products.map((product) => (
          <div className="card" key={product.id}>
            <h3>{product.item}</h3>
            <p>
              {product.city}, {product.state}
            </p>
            <Link to={`/product/${product.id}`}>More Details</Link>
          </div>
        ))}
      </div>
      <Switch>
        <Route
          path="/product/:id"
          render={({ match }) => (
            <ProductDetails
              product={products.find(
                (product) => String(product.id) === match.params.id
              )}
            />
          )}
        />
      </Switch>
    </div>
  );
}

Popularity 3/10 Helpfulness 3/10 Language javascript

Source: stackoverflow.com

Tags: javascript product url

Link to this answer
Share Copy Link