Error: Objects are not valid as a React child

JavaScript
1

I’m planning to display the data of orders.

This is the data:

const orders = {
  firstName: "Jennie",
  lastName: "asdasda",
  address: "US",
  number: "",
  order: [
    { product: "Tumbler - 500- ML ", variation: [{ qty: 12, color: "red" }] },
    { product: "Shirt - M ", variation: [{ qty: 14, color: "green" }] }
  ],
  instructions: "asdasdad",
  contact: "877827348"
};

This what I tried but it is causing an error that says:

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

Also in codesandbox: sad-boyd-zm3jin - CodeSandbox


 {Object.entries(orders).map(([key, val]) => (
        <h2 key={key}>
          {key}: {val}
        </h2>
      ))}
2

Yeah, you can’t render objects to the screen in React. The problem I guess is that your order key has an array of objects as val.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.