1

I would like to display the products of this API ?

I do not want to display all of them, only the one associated with the productCode param

import React, {useEffect, useState} from 'react';
import { useParams } from 'react-router-dom';

function ItemDetail() {
    const { productCode } = useParams(); // <-- access `productCode` param
    const [item, setItem] = useState({});
    const token = "ace1a6fd-a483-3de5-9df7-6c9b3acaa93b";

    useEffect(() => {
      // reference `productCode` in request
      fetch(
        `https://api.flash-internal.flash-group.com/ecommerceManagement/1.0.0/api/product/${productCode}`,
        {
          method: "GET",
          headers: { Authorization: `Bearer ${token}` },
        }
      )
        .then((res) => res.json())
        .then((json) => setItem(json));
    }, [productCode]); // <-- add `productCode` as dependency

    console.log(productCode);

  return (
    <div>Item Detail Page</div>
  )
}

export default ItemDetail;

1 Answers1

0

Try this in the then part:

then((json) => {Object.keys(json).map(item => item.id ==  productCode.id ? setItem(item) : ") });
yanir midler
  • 2,153
  • 1
  • 4
  • 16
  • Something is wrong with that code –  Apr 13 '22 at 12:29
  • its an example . you need to check how the json form your server build and compare the id of each item in the json to the productCode using id or some other value that they have in common – yanir midler Apr 13 '22 at 12:34