useState: destructure nested object with typescript

Question

I'm trying to destructure an object in useState so I can directly use the properties. But I am not sure about the correct syntax to use with typescript.

Here is the interface for "topic":

export interface ITopic{
    title: string
    text?: string
    posts?: string[]
}

Without destructuring it would look like:

const [topic, setTopic] = useState<ITopic>()

To destructure, I have tried a few things,for instance this doesn't work:

const [{title, text, posts}: ITopic, setTopic] = useState<ITopic>();

It says (if I hover over title and setTopic):

Property 'title' does not exist on type 'ITopic | undefined'
Tuple type '[ITopic | undefined, Dispatch<SetStateAction<ITopic | undefined>>]' of length '2' has no element at index '2'.

the initial value of the state is undefined. why are you trying to desctructing undefined — nullptr
– nullptr, Commented Sep 27, 2022 at 16:24

Andrew · Accepted Answer · 2022-09-27 16:26:25Z

3

Use an initial value. Because you don't have an initial value, it detects on the first render that this cannot be destructured.

export interface ITopic{
    title: string
    text?: string
    posts?: string[]
}

const [{title, text, posts}, setTopic] = useState<ITopic>({
    posts: [],
    text: '',
    title: ''
});

edited Sep 27, 2022 at 16:26

answered Sep 27, 2022 at 16:01

Andrew

7,5855 gold badges28 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

k.tten Over a year ago

Might want to reword problem 1 to be more clear? In any case, optional properties aren't the cause of this error, but they should be removed anyways if you are going to provide an initial value.

Andrew Over a year ago

@caTS That being said, I was wrong about the optional properties. I removed that portion from my answer. Thanks

Enfield Li · Accepted Answer · 2022-09-27 16:33:55Z

1

The second approach is to add a check in the forms of loading data:

const [topic, setTopic] = useState<ITopic | undefined>() 
// explicitly define the type as "undefined", which is unnecessary, but a good indicator

if(!topic) return <div>loading</div>;

const {title, text, posts} = topic; // then you can safely destructure the object

answered Sep 27, 2022 at 16:33

Enfield Li

2,6201 gold badge15 silver badges33 bronze badges

Collectives™ on Stack Overflow

useState: destructure nested object with typescript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related