0

My cars.json

"cars": [
    {
        "id": 1,
        "name": "Kia K5",
        "seats": 4,
        "price": 23690,
        "color": [
            {
                "name": "Black",
                "bonusPrice": 0
            },
                    
            {
                "name": "Gray",
                "bonusPrice": 0
            },
        ]
    },

And My fetch in App.js

    fetch('http://localhost:8000/cars', {
      method: 'GET',
      headers : { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      }
    })
      .then((res) => res.json())
      .then(cars => {
        setCars(cars)
      });
  }, [])

but I got an error:

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

Where am I wrong? Help me. Thank you all.

zenorn24
  • 1
  • 2
  • We'll need to see what you're returning from the component. The code you showed might be indirectly involved, but it's not the direct cause. I'm guessing it will be some code that starts with `cars.map(` or `car.color.map(` – Nicholas Tower Dec 09 '21 at 02:26
  • Thank you for your help. I'll check what I'm writing in the component – zenorn24 Dec 09 '21 at 02:31

0 Answers0