Here, I got the order variable from another page. There are some objects, arrays inside the order variable. I am trying to map the array orderItems from the order. But I am getting the error,
TypeError: order.orderItems is undefined
Index
src/pages/OrdersDescription/Index.js:24
21 | <div>
22 | <div className="row justify-content-center">
23 | <div className="col-md-5 card">
> 24 | <h2>Items</h2>
| ^ 25 |
26 | {order.orderItems.map((item) => {
27 | return (
getOrderById/</<
src/app/actions/orderActions.js:77
74 | axios
75 | .post("/api/orders/getorderbyid", { orderid: orderid })
76 | .then((res) => {
> 77 | dispatch({
| ^ 78 | type: "GET_ORDERBYID_SUCCESS",
79 | payload: res.data,
80 | });
Here is my whole code,
import React, { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getOrderById } from "../../app/actions/orderActions";
import Loader from "../../components/Spinner/Index";
const Index = ({ match }) => {
const dispatch = useDispatch();
const orderItemDataFromState = useSelector(
(state) => state.getOrderByIdReducer
);
const { order, loading } = orderItemDataFromState;
useEffect(() => {
dispatch(getOrderById(match.params.orderid));
console.log("ese");
}, [dispatch]);
console.log(order);
return (
<div>
{loading && <Loader />}
{order && (
<div>
<div className="row justify-content-center">
<div className="col-md-5 card">
<h2>Items</h2>
{order.orderItems.map((item) => {
return (
<div>
<h2>{item.name}</h2>
<p>{item.quantity}</p>
<p>
{item.quantity} * {item.price} =
{item.quantity * item.price}
</p>
</div>
);
})}
</div>
<div></div>
</div>
</div>
)}
</div>
);
};
export default Index;
I have tried to solve the problem but it's still same. When i run the code i got another error in the console,
GEThttp://localhost:3000/ordersdescription/6140593f5c89e23eb059af8d
[HTTP/1.1 404 Not Found 191ms]
If you can be certain that order.orderItems Is not defined then you can do one of the following:
Change the line {order && ( to {order && order.orderItems && ( to prevent the undefined error. However it would seem you got a 404.
It would be easier to put this right above the return statement: if !order || !order.orderItem return null
If you know its defined, then please double check your spelling and casing as well as closely examine the response structure