CODEWITHSUNDEEP
reactjsapiuser-interfaceaxiosuse-effect
risingmoon77
risingmoon77

Reputation: 91

React Axios useEffect hook, different types of errors when rendering to the user interface

I am pretty new to full stack, and im using MERN, so forgive me if this is an easy/silly fix (though I looked at several and different types of sources, with no luck thus fur).

I can not seem to render my array of items to reacts ui. I get the GET request and have logged it to the console so i Know its there but when i go and try and map it or put it into a div with a simple function to iterate it or just simply to display some information from the JSON file, i keep getting errors. Here is the JSON file (which passed a validation check) and the Component I'm working in.

   [
        {
            "_id": "5e1ff19d926f7c245ce01d7c",
            "foodmenu": [
                {
                    "food": "burger",
                    "orders": 0
                },
                {
                    "food": "fish",
                    "orders": 0
                },
                {
                    "food": "salad",
                    "orders": 0
                },
                {
                    "food": "curry",
                    "orders": 0
                },
                {
                    "food": "sushi",
                    "orders": 0
                },
                {
                    "food": "egg rolls",
                    "orders": 0
                },
                {
                    "food": "Jacket potatoe",
                    "orders": 0
                },
                {
                    "food": "hash browns",
                    "orders": 0
                },
                {
                    "food": "mash potatoe",
                    "orders": 0
                },
                {
                    "food": "pizza",
                    "orders": 0
                },
                {
                    "food": "sandwhich",
                    "orders": 0
                },
                {
                    "food": "omlete",
                    "orders": 0
                }

            ]
        }
    ]


import React, { Fragment, useState, useEffect } from "react";
import axios from "axios";

function Orders() {
  const [data, setData] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios("api/orders/foodmenu/foodtypes");
      setData(result.data);
      console.log(result.data);
    };
    fetchData();
  }, []);


  return (

     <div>
    {data[0].foodmenu.map(data => (
      <div key={data._id}>{data.foodmenu}</div>
    ))}
    
  </div>

  )
 
};

export default Orders;

I get Type errors like: 

TypeError: Cannot read property 'foodmenu' of undefined

&

TypeError: Cannot read property 'map' of undefined

I appreciate the help.

Upvotes: 0

Views: 295

Answers (3)

Ys Mayuran
Ys Mayuran

Reputation: 41

const tablelist = data.map((data, key) => {
              return (
                <tr key={key}>
                  <td>{data.orderID}</td>
                  <td>{data.orderDateTime}</td>
                  <td>{data.priceTotal}</td>
)

Do this in your useeffect() and call {tablelist} inside return

Upvotes: 1

Supun Induwara
Supun Induwara

Reputation: 1662

You can do it like this. First you need to validate the length before accessing data[0] because the array is empty before fetching data from server. Don't use same variable name data in both state and map function parameter. Though it works, it is not clear to read. Also you cannot use data._id as the key of mapped div because it need a unique value. In your scope, data variable is the local parameter, not the state. That is the reason for using another parameter name item instead of data. Also you can use the second parameter index in map function for the key. Finally you have to use proper display text like {item.food} - {item.orders} instead trying to print the object or array.

return (
  <div>
    {data.length > 0 && data[0].foodmenu.map((item, index) => (
      <div key={index}>{item.food} - {item.orders}</div>
    ))}
  </div>
);

Upvotes: 0

user524351
user524351

Reputation: 311

If you add a simple length check first, it should work. The problem is that the component is rendered before the data has loaded. This means that data[0] will be undefined and therefore accessing properties on it will fail.

Using a length check, since && is evaluated lazily, your component will return false until your data array has elements inside it and not try to execute the rest of the code in the component.

return (data.length &&
   <div>
      {data[0].foodmenu.map(data => (
         <div key={data._id}>{data.foodmenu}</div>
      ))} 
  </div>)

Upvotes: 0

Related Questions