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

Question

I have this state

const [value, setValue] = useState([]) // init with empty array

Which I set like this

  async function createSalesOrder () {
      const res = await axios.post('http://localhost:5000/')
      setValue([...value, res.data])
      return (res)
    }

And then I get the Objects are not valid as a React child error

This is how res looks

data: {salesOrderId: "9000002031"}
status: 200
statusText: "OK"
headers: {content-length: "29", content-type: "application/json; charset=utf-8"}
config: {url: "http://localhost:5000/", method: "post", headers: {…}, transformRequest: Array(1), transformResponse: Array(1), …}
request: XMLHttpRequest {readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, onreadystatechange: ƒ, …}
__proto__: Object

And this is how it the values is used in the returned method

        <tbody>
          <tr>
            <td>1</td>
            <td>{value.map((item, i) => <p key={i}>{item}</p>)}</td>
          </tr>
        </tbody>

The problem seems to be on render method. Can you show how it uses the value state to render in the return of the component. — rockfight

rockfight rockfight · Accepted Answer · 2020-03-04T17:31:32

Your value will have object {salesOrderId: "9000002031"} inside it so your map function should look something like

         <tbody>
          <tr>
            <td>1</td>
            <td>{value.map((item, i) => <p key={i}>{item.salesOrderId}</p>)}</td>
          </tr>
        </tbody>

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

2 Answers