How to use useState with an object?

Question

How to use useState with an object? This is not the same as other similar questions. My code below gives strange error...

import React, { useState } from "react";

export default function App() {
    const [data, setData] = useState({data: 'something'});

    return (
         <h1>Data: {data}</h1>
    );
}

https://codesandbox.io/s/usestate-with-an-object-m176t?file=/src/App.js:0-167

Answer 1

Your problem is not at the useState .
Your problem happens when you try to render the {data} , because is an object. You need to render a property.

In this case, your data object is:

{
  data: 'something'
}

To render the value, you should:

import React, { useState } from "react";

export default function App() {
    const [data, setData] = useState({data: 'something'});

    return (
         <h1>Data: {data.data}</h1>
    );
}

Answer 2

You can not pass objects as children in React .

Please note that you are passing an object <h1>Data: {data}</h1> , the data is an object that has a data property

Solution

import React, { useState } from "react";

export default function App() {
    const [data, setData] = useState({data: 'something'});

    return (
         <h1>Data: {data.data}</h1>
    );
}