Getting [object Object] instead of object in React

Question

I'm fetching an array of objects in my React application. Later I am returning a Product component to each object.

 const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch("http://localhost:8080/products")
      .then(resp => resp.json())
      .then(resp => {
        console.log(resp); //line 55
        setProducts(resp)
      })
  }, []);

  return (
      <div>
        {products.map(product => {
          return <Product product={product} />
        })}
      </div>
  );

This is result of my console.log(resp) in line 55:

    Array(6) [ {…}, {…}, {…}, {…}, {…}, {…} ]

0: Object { id: 1, name: "prod 3", amount: 30, … }

active: true

amount: 30

id: 1

name: "prod 3"

<prototype>: Object { … }

1: Object { id: 23, name: "prod 2", amount: 20, … }

2: Object { id: 4, name: "Angular course", amount: 19, … }

3: Object { id: 42, name: "peanut butter", amount: 13, … }

4: Object { id: 43, name: "soup", amount: 12, … }

5: Object { id: 15, name: "hot-dog", amount: 11, … }



length: 6

<prototype>: Array []

So I am passing a single object to my Product component. However, when I want to view the passed object in the logs, I get the object inside the object:

 const Product = (product) => {
      console.log(product); // result: Object { product: {…} }
 }

Why am I getting an object inside an object instead of a single object?

Because components take a props object as their parameter. You may have meant ({ product }) to destructure it, or meant to use props, e.g., (props) and access it via props.product. — Dave Newton
– Dave Newton, Commented Jun 3, 2021 at 23:55
props are wrapped in an object and then pass to child component. So you can destructure as const Product = ({product}) => { — DecPK
– DecPK, Commented Jun 3, 2021 at 23:55

Rômulo Bourget Novas · Accepted Answer · 2021-06-03 23:59:08Z

In react the argument for a component is always their props object. This is an object with all the properties you define in the tag. So, for example if you define <Product anotherProp={anotherProp} product={product} /> you would get a props object with the keys product and anotherProp. So the correct way to get the product is through destructuring assingment.

const Product = (props) => {
      const {product} = props;
      console.log(product); // result: Object { product: {…} }
 }

If you wish that your props object is exactly your product object you have to change the way you set your tag... In your case, it would be something like this...

 const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch("http://localhost:8080/products")
      .then(resp => resp.json())
      .then(resp => {
        console.log(resp); //line 55
        setProducts(resp)
      })
  }, []);

  return (
      <div>
        {products.map(product => {
          return <Product {...product} />
        })}
      </div>
  );

Collectives™ on Stack Overflow

Getting [object Object] instead of object in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related