Orders.js

// Orders.js
import React from 'react';
import useOrders from './useOrders';

function Orders() {
  const { orders } = useOrders();

  return (
    <div>
      <h1>Orders</h1>
      <OrdersList orders={orders} />
    </div>
  );
}

export default Orders;

OrdersList.js

// OrdersList.js
import React from 'react';
import OrdersListItem from './OrdersListItem';

function OrdersList(props) {
  const { orders } = props;

  return (
    <ul>
      {orders.map(order => (
        <OrdersListItem 
          key={order.id}
          order={order}
        />
      ))}
    </ul>
  );
}

export default OrdersList;

OrdersListItem.js

// OrdersListItem.js
import React from 'react';

function OrdersListItem(props) {
  const { order } = props;

  return (
    <li>
      <h2>{order.title}</h2>
      <p>{order.description}</p>
    </li>
  );
}

export default OrdersListItem;