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

Javascript – Error: Objects are not valid as a React child (found: object with keys {id, startDate, days, absenceType, employee, approved})

I am trying to map through some data I have received from an API but I keep getting this error: Error: Objects are not valid as a React child (found: object with keys {id, startDate, days, absenceType, employee, approved}).

Now I have tried to map through it, I have tried to use Object, flatMap and forEach nothing seems to work. It looks like its an array of objects, am I missing something here? I just want to display this data on the page.

I have attached a screenshot of what the data looks like.enter image description here

UPDATE: Following some advice my code looks like this now:

{Object.entries(absence).map((item) => (
    <div key={item.id}>
      {" "}
      <p>ID: {item.id}</p> <p>Start Date: {item.startDate}</p>{""}
      <p>Days: {item.days}</p>{" "}
    </div>
 }

enter image description here

However the data is still not showing.

Update 2.0: Definately made improvements however some entries look empty and also tried to access the first and last name and it wont let me.

{Object.entries(absence.absence).map((item) =>
    item.map((i) => (
      <div key={i.id}>
        {" "}
        <p>ID: {i.id}</p> <p>Start Date: {i.startDate}</p>{" "}
        <p>Days: {i.days}</p>
        <p>absenceType: {i.absenceType}</p>
        <p>Status: {i.approved}</p>
      </div>
    ))
  )}

enter image description here

Tags:

2

Answers


  1. 0

    first absence is a obj within it another absence exist which contain array of obj .Use absence.absence.forEach((elm)=>elm). I hope it works

    Login or Signup to reply.
  2. 0

    you are receiving the object of object
    so i think you should try this

      {!!absence && absence?.absence?.length > 0 ? (
    absence?.absence.map((i) => {
      return (
        <div key={i.id}>
          <p>ID: {i.id}</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>
  )}

    You have to and check like, iterate the data only if absence is present.

    Hope it will work for you.

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

Back To Top
Search