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

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?

>Solution :

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
}) => { .... }