Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

203
Views
How to resolve type error when mapping an array element in react?

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]
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!