I'm currently using Next.js with TypeScript and Material UI. I have created a component called MyOrders and I am trying to pass data from MyOrders to MyOrderItem. However, I am encountering an issue where I am unable to pass the data to MyOrderItem.
The code below is not functioning as expected and is throwing an error. Can someone please assist me in identifying where I should make changes to my code?
import { MyOrderItemsData } from '@/types/MyOrderItemsData';
import { Box } from '@mui/system';
import MyOrderItem from './MyOrderItem';
const orders: MyOrderItemsData[] = [
{
orderId: '81318551 - 0003',
productName: 'React Exports Performance Headset',
productThumbnail: '../src/assets/images/product-2.png',
productDescription: 'Color Black RGB, 270gr',
sallerName: 'nicolayritz1337',
deliveryTime: 'February 14',
price: '$199.99',
quantity: 1,
},
{
orderId: '81318551 - 0002',
productName: 'React Esports Perforrmance Heaadset',
productThumbnail: '../src/assets/images/product-2.png',
productDescription: 'Colour Black RGB, 270gr',
sallerName: 'nicolayritz1337',
deliveryTime: 'February 14',
price: '$109.00',
quantity: 1,
},
{
orderId: '81318551 - 0001',
productName: 'Gaming Headset Krraken X USB',
productThumbnail: '../src/assets/images/product-2.png',
productDescription: 'Colour Black, 240gr',
sallerName: 'nicolayritz1337',
deliveryTime: 'February 14',
price: '$79.00',
quantity: 1,
},
];
const MyOrders: React.FC = () => (
<Box>
{orders.map((order, index) => (
<MyOrderItem
key={order.orderId}
index={index}
order={order}
/>
))}
</Box>
);
export default MyOrders;
Below is the code for the MyOrderItem component that I am trying to pass data to:
import { MyOrderItemsData } from '@/types/MyOrderItemsData';
import { Box } from '@mui/material';
import { FC, useId } from 'react';
interface Props {
product: MyOrderItemsData;
}
const MyOrderItem: FC<Props> = () => {
return (
<Box>
<h1>MyOrderItem</h1>
</Box>
);
};
export default MyOrderItem;
I have made several attempts to pass the data from MyOrders to MyOrderItem, but have been unsuccessful in resolving the issue. I am unsure of where my code is incorrect.