Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead. JS

Question

When I am trying to render a component on my user's dashboard I get this error message:

Error: Objects are not valid as a React child (found: object with keys {jobTitle, jobDescription, salaryRange, closingDate, onClick, handleDelete}). If you meant to render a collection of children, use an array instead.

I'm not sure why I'm getting it because I am mapping the variables.

Here is my code:

class MyJobOpenings extends Component {
  state = {
    jobOpenings: [],
  };

  componentDidMount = async () => {
    const { data: jobOpenings } = await getJobOpenings();

    this.setState({ jobOpenings });
  };

  handleClick = () => {
    const application = document.querySelector(".active-application-grid");
    const show = document.querySelector(".show-details");
    const hide = document.querySelector(".hide-details");

    application.classList.toggle("show-content");
    show.classList.toggle("inactive");
    hide.classList.toggle("inactive");
  };

  render() {
    return (
      <div>
        <Helmet>
          <title>Job Seeker | My Job Openings</title>
        </Helmet>
        <Sidenav />
        <div className="my-applications-container">
          <div className="my-applications-header">
            <h1>My Job Openings</h1>
            <Link to="/dashboard/my-job-openings/new">
              <input type="submit" id="new-btn" value="New Job Opening" />
            </Link>
          </div>
          <div className="my-applications">
            {this.state.jobOpenings.map((jobOpening) => (
              <ActiveJobOpening
                key={jobOpening._id}
                jobTitle={jobOpening.title}
                jobDescription={jobOpening.description}
                salaryRange={jobOpening.salary}
                closingDate={jobOpening.closingDate}
                onClick={this.handleClick}
                handleDelete={this.handleDelete}
              />
            ))}
          </div>
        </div>
      </div>
    );
  }
}

When I call the server with getJobOpenings(), this is the response I get from my server:

[{
    "_id": "61e937fc8543d6ac4e5b8c7b",
    "title": "Testing 123",
    "description": "This is a job description for a web developer at jobseeker.com. If you would like to apply please email us at.",
    "salary": "$20,000 - $49,999",
    "closingDate": "2022-01-28T00:00:00.000Z",
    "userId": "61e7fbcf04cfba5fd837c578",
    "__v": 0
}, {
    "_id": "61de9433b095d680fd8664be",
    "title": "Web Developer",
    "description": "This is a job description for a web developer. You will be required to produce and maintain a website for jobseeker.com. This description has to be between 100 and 2500 characters.",
    "salary": "$0 - $19,999",
    "closingDate": "2022-02-19T00:00:00.000Z",
    "__v": 0
}]

ActiveJobOpening Component:

const ActiveJobOpening = (
  jobTitle,
  jobDescription,
  closingDate,
  salaryRange,
  onClick,
  handleDelete
) => {
  return (
    <div className="active-application-container">
      <div className="active-application">
        <div className="active-application-grid">
          <p className="grid-item title">Job Title:</p>
          <p className="grid-item content">{jobTitle}</p>
          <p className="grid-item title">Job Description:</p>
          <p className="grid-item content">{jobDescription}</p>
          <p className="grid-item title">Salary Range:</p>
          <p className="grid-item content">{salaryRange}</p>
          <p className="grid-item title">Closing Date:</p>
          <p className="grid-item content">{closingDate}</p>
        </div>
        <div className="show-details">
          <input type="submit" value="Show More Details" onClick={onClick} />
        </div>
        <div className="hide-details inactive">
          <input type="submit" value="Show Less Details" onClick={onClick} />
        </div>
        <div className="buttons">
          <Link to="/dashboard/my-job-openings/:id">
            <input type="submit" id="edit-btn" value="Edit" />
          </Link>

          <input
            type="submit"
            id="delete-btn"
            value="Delete"
            onClick={handleDelete}
          />
        </div>
      </div>
    </div>
  );
};

Can someone please help me figure out what's wrong?

Answer 1

You've passed all the props into the jobTitle variable.

const ActiveJobOpening = (
  jobTitle, // <-- treated as the props object, rest are ignored
  jobDescription,
  closingDate,
  salaryRange,
  onClick,
  handleDelete
) => { .... }

You should destructure these all from a single props object.

const ActiveJobOpening = ({
  jobTitle,
  jobDescription,
  closingDate,
  salaryRange,
  onClick,
  handleDelete
}) => { .... }

Answer 2

You have done this.state.jobOpenings.map and then sent _id , title , description etc to ActiveJobOpening component. And in the ActiveJobOpening component, you are taking them as parameters and trying to show them in the browser. But there is the problem. Your sending _id , title , description etc are object and object can't show in the browser. That's why "Objects are not valid as react child..." error is showing. You should take the key-value pairs as variables from the object and then return them. In that case, You can simply destructure the object and there will be declared variables of the keys. Return them and then browser will be able to show the value instead of trying to show an object and giving error.