const CardContainer = () => {

​

const [work, setWork] = useState([]);

  const [isLoading, setIsLoading] = useState(true)

​

  useEffect(() => {

    fetch('https://www.hatchways.io/api/assessment/work_orders')

      .then((response) => response.json())

      .then((data) => {

        const respones = data.orders.map((order) =>

          fetch(`https://www.hatchways.io/api/assessment/workers/${order.workerId}`).then((res) => res.json()),

        );

        Promise.all(respones).then((fetchedOrders) => {

          setWork(fetchedOrders);

          setIsLoading(false)

        });

      });

  }, []);

​

  return (

    isLoading ? <div>Loading</div> : <div>

      <h2>Cards</h2>

      {work.map((item, index) => (

        <div key={index} props={item}>{item.worker.companyName} </div>

      ))}

    </div>

​

  )

}