Error: Objects are not valid as a React child. Getting object of objects instead of array of objects

Question

I am pretty new to React and I am trying to get data from my Jobly backend. In my code I set company to be the data received from my backend, and company.jobs is seen as an array of objects. However when I try to set jobs to the mapped company.jobs array, it becomes an object of objects instead, causing the error. From my understanding, company.jobs.map() should return an array of data, not an object?

This is the code extracting the data and setting jobs:

let [jobs, setJobs] = useState([]);

const company = await JoblyApi.getCompany(handle);

    
setJobs(jobs = company.jobs.map(j => (
        <JobCard key={j.id}
            title={j.title}
            salary={j.salary}
            equity={j.equity}/>
    )));

The data JoblyApi.getCompany(handle) returns is:

{
  "company": {
    "handle": "anderson-arias-morrow",
    "name": "Anderson, Arias and Morrow",
    "description": "Somebody program how I. Face give away discussion view act inside. Your official relationship administration here.",
    "numEmployees": 245,
    "logoUrl": "/logos/logo3.png",
    "jobs": [
      {
        "id": 7,
        "title": "Technical brewer",
        "salary": 157000,
        "equity": "0"
      },
      {
        "id": 18,
        "title": "Embryologist, clinical",
        "salary": 138000,
        "equity": "0"
      },
      ...(more jobs)

Nick · Accepted Answer · 2021-02-21 01:39:26Z

1

There are a few things going on here that need some slight tweaking.

Your API call is an effect, so I would recommend running a useEffect hook. Assuming you just need to run it once on initial component render, you can use an empty dependency array.

useEffect(() => {
  // API call here
}, []);

Note that if your effect depends on any variables (e.g., if you want it to run every time handle updates), you can provide that in the dependency array. The following effect will run on initial render and every time handle changes.

useEffect(() => {
  // API call here
}, [handle]);

You likely don't want to set your state to the array of JobCard components, but rather just your returned data. You can return actual JSX later in the return of the entire component.

Your final component code might look something like this:

import { useState, useEffect } from "react";

function MyComponent() {
  let [jobs, setJobs] = useState([]);

  useEffect(() => {
    async function getJobs() {
      const company = await JoblyApi.getCompany(handle);
      setJobs(company.jobs);
    }
    getJobs();
  }, []);

  return jobs.map((j) => (
    <JobCard key={j.id} title={j.title} salary={j.salary} equity={j.equity} />
  ));
}

edited Feb 21, 2021 at 1:39

answered Feb 21, 2021 at 1:34

Nick

16.7k3 gold badges21 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Allen Over a year ago

I refactored my code but unfortunately I am getting the same errors, I am pretty sure the error has something to do with company.jobs. It returns an array of objects in insomnia, however when I console.log(company.jobs) it logs an object of objects. Not sure why it is doing this though

Dean James · Accepted Answer · 2021-02-21 01:32:00Z

0

The way you're setting the state is slightly wrong. Your state line should be:

setJobs(company.jobs.map(j => (

Without the jobs = part.

answered Feb 21, 2021 at 1:32

Dean James

2,6434 gold badges23 silver badges30 bronze badges

Collectives™ on Stack Overflow

Error: Objects are not valid as a React child. Getting object of objects instead of array of objects

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related