So close - trying to map two pcs of data into one card

Hey Everyone! I was doing an assessment, which I timed out on, but would love to solve it anyways as I find it to be great JavaScript/React practice. Dying to get it too work… lol

I am trying to map data from 2 different api calls onto one card. I first got the ids of orders to match the ids in the 2nd API call. I am able to map the data of the workers(2nd fetch call), but I can not map the data of orders (my first fetch).

The corresponding matching work id and order id should be mapped onto one card… totally scratching my head on this one.

import React, { useEffect, useState } from "react";
import CardUI from "./CardUI";

const CardContainer = () => {
  const [work, setWork] = useState([]);
  const [work2, setWork2] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    fetch("https://www.hatchways.io/api/assessment/work_orders")
      .then((response) => response.json())
      .then((data) => {
        setWork(data.orders);
        // console.log(data.orders);//rtns an array of orders
        // map through the array of orders to get working matching workerIds
        const respones = data.orders.map((order) =>
          fetch(
            `https://www.hatchways.io/api/assessment/workers/${order.workerId}`
          ).then((res) => res.json())
        );
        // console.log(respones); //rtns promisees
        Promise.all(respones).then((fetchedOrders) => {
          setWork2(fetchedOrders);
          console.log(fetchedOrders); //rts an array of workers
          setIsLoading(false);
        });
      });
  }, []);

  return isLoading ? (
    <div>Loading</div>
  ) : (
    <div>
      <h2>Cards</h2>
      {work2.map((item, index) => (
        <CardUI key={index} props={item} />
      ))}
    </div>
  );
};

export default CardContainer;

both api calls should be mapped and one cardUI… I hope this makes sense. I am super confused myself.

Based on this thread: arrays - Javascript Fetch inside a map - Stack Overflow
You should clear the .then of the workers that’s the problem and if the problem still exist put the map in the Promise.all directly.

1 Like

thanks . I actually saw that link a few days ago. That isn’t same problem I am having. I have my workers IDs, and they map to my UI, but I cant’t map my orders IDs into the card which was used to get the workes IDs.

so after making my first fetch to the orders api, I was able to use the orders id to get the data for workers id. the issue is I am only able to map the workers ids… when I need to map matching orders and workers ids to a card.

You mean your Card accepts two props like this:

{work2.map((item, index) => (
        <CardUI key={index} props={work[index], item} />
      ))}
1 Like

thanks for the help, but I still can not get the data to show on the card.

If you want to pass two props then you should do that:
<CardUI key={index} prop1={item} prop2={work[index]} />
then in your Card you should pass the two props.
If that didn’t work for you then add the project to repple or glitch or github and give me the link so i can show exactly what you do.

1 Like

Hi Mohamed, Here you go! happy hacking: zealous-hypatia-mhwr6 - CodeSandbox

Shouldn’t it be:

{work2.map(({ worker }, index) => (
  <CardUI key={index} props={worker} />
))}
const Card = ({props}) => {
  console.log(props)
  return (
    <>
      <div className="card">
        <h3>{props.companyName}</h3>
        <p>{props.name}</p>
        <p></p>
      </div>
    </>
  );
};

But you seem to have duplicate objects.


Edit: You can clean the Card up a bit as well (destructuring and remove the fragment).

const Card = ({props: { companyName, name }}) => {
  return (
      <div className="card">
        <h3>{companyName}</h3>
        <p>{name}</p>
        <p></p>
      </div>
  );
};

Or:

const Card = ({props}) => {
  const { name, companyName } = props;
  return (
      <div className="card">
        <h3>{companyName}</h3>
        <p>{name}</p>
        <p></p>
      </div>
  );
};

I would also suggest changing the props prop on the CardUI component to something else, like worker.

<CardUI key={index} worker={worker} />
1 Like

As I said before the problem in CardUI you didn’t handle the props well.
First: in cardContainer make that choose well props name as @lasjorg said and each data you want to pass add it as props like that:

{work2.map((item, index) => (
        <CardUI key={index} worker={item} order={work[index]} />
      ))}

Then: in CardUI component access to the props like that:

({worker, order}) => {//body}

That’s it :slight_smile:

1 Like

Hey guys Its been solved!!! I was racking my brain… reading the code over and over again! I got it now. I needed to add one more .then to pass on the data: then((res) => res.json()) .then(({worker}) => ({worker, order}))

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.