How can I map this join data in React JS

I have two API Data I am using. I am trying to map the data as list item. I am also trying to map the correct logo for the correct item using productCode as a matching point. How can I achieve this? I have attached my code below. Each item must have the logo, the amount, and productCode. Please if there is also a better way to merge the two API, I would be happy to learn....

export default function App() {

  const [Alldata, setAlldata] = useState([]);
  useEffect(() => {
    // GET request using fetch inside useEffect React hook
    fetch("http://localhost:1337/api/rows/")
      .then((response) => response.json())
      .then((json) => setAlldata(json));
    // empty dependency array means this effect will only run once (like componentDidMount in classes)
  }, []);

  const token = "TOKEN HERE";
  const [result, setResult] = useState([]);

  useEffect(() => {
    fetch(
      "https://api.flash-internal.flash-group.com/ecommerceManagement/1.0.0/api/product/",
      {
        method: "GET",
        headers: { Authorization: `Bearer ${token}` },
      }
    )
      .then((res) => res.json())
      .then((json) => setResult(json));
  }, []);

  const mainDATA = {result, Alldata};
  console.log(mainDATA);


  return (
    <div>App</div>
  )
}

1 answer

  • answered 2022-05-04 11:11 Ben Clayton

    First up:

      useEffect(() => {
        setProducts(result.result);
      });
    

    .. is likely to cause an infinite loop as it'll run on every render. Calling setProducts will queue a new render, that'll re-run useEffect etc, that'll queue a new render etc.

    I think you can leave out this useEffect and simply use:

    useEffect(() => {
        fetch(
          "https://api.flash-internal.flash-group.com/ecommerceManagement/1.0.0/api/product/",
          {
            method: "GET",
            headers: { Authorization: `Bearer ${token}` },
          }
        )
          .then((res) => res.json())
          .then((json) => setProducts(json?.result));
      }, []);
    

    .. to write direct to the products state.

    Then (assuming that products is an array, and you have a component ProductItem that can render it) you'd write something like:

    return (
    <div>
    { products.map( product => <ProductItem key={product.id} product={product}/> ) }
    </div>
      )
    

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum