Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – React TypeError: Cannot read properties of undefined (reading 'map')

I am not sure what is going on here but it saying that the data is undefined, I have checked and the data is there in the redux store and can be console loged on the APP.js file

App.js

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import axios from "axios";

import "./App.css";
import { setAbsences } from "./store/absence/absences.action";
import { selectAbsences } from "./store/absence/absences.selectors";

function App() {
  const absence = useSelector(selectAbsences);
  const dispatch = useDispatch();

  useEffect(() => {
    const getAbsences = async () => {
      try {
        const result = await axios.get(
          `....`
        );

        dispatch(setAbsences(result.data));
      } catch (error) {
        console.error("Error fetching absences:", error);
      }
    };
    getAbsences();
  }, []);

  return (
    <div className="App">
      <h1>List of absences</h1>

      {absence && absence?.absence?.length > 0 ? (
        absence?.absence.map((i) =>
          Object.entries(i).map((abs) =>
            abs[1].employee.map((n) => (
              <div className="card" key={i.id}>
                <>
                  <p>First Name: {n.firstName}</p>
                  <p>Last Name: {n.lastName}</p>
                </>
                <p>ID: {i.startDate}</p> <p>Start Date: {i.startDate}</p>{" "}
                <p>Days: {i.days}</p>
                <p>absenceType: {i.absenceType}</p>
                <p>Status: {i.approved}</p>
              </div>
            ))
          )
        )
      ) : (
        <p>No data Found</p>
      )}
    </div>
  );
}

export default App;

any help would be greatly appreciated. My console says the following: Cannot read properties of undefined (reading ‘map’)
TypeError: Cannot read properties of undefined (reading ‘map’)

I believe this is because absence.absence which is received from the API is sometimes undefined or too slow to load.

Tags:

2

Answers


  1. 0 
    if(Array.isArray(absence) && absence.absence?.length > 0) {
   return 'absence is array and not empty'
};
if(Object.keys(absence).length > 0) {
   return 'absence is object and not empty'
};
    Login or Signup to reply.
  2. 0

    I’m guessing from the code that the data structure looks like this.

    const absence = {
  absence: [
    { abs: 
      { 
        employee: [{firstName: "foo", lastName: "bar"}]
      },
      startData: "str or date",
      days: "str or num",
      absenceType: "str",
      approved: "str or boolean"
   }
  ]
}

    problem is abs[1].employee, Object.entries(i) is expected to look like this

    absence.absence.map(i => {
  const result = Object.entries(i)
  console.log(result)
  /** like this
  [
   [
    'abs',
    {
      employee: [ { firstName: 'foo', lastName: 'bar' } ]
    }
   ],
   [ 'startData', 'str or date' ],
   [ 'days', 'str or num' ],
   [ 'absenceType', 'str' ],
   [ 'approved', 'str or boolean' ]
  ]
 **/
})

    abs[1], Other than the first element, it doesn’t seem to be an object type with the key employee.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search