Navigate back to the homepage

How to use interface in React hook useState?

Infinitbility
React, React, TypeScript
November 16th, 2021 · 1 min read
How to use interface in React hook useState?

Hello Friends 👋,

Welcome To Infinitbility! ❤️

This tutorial will help you to use interface or DTO in your React useState hook, Below example will work on react and react native both frameworks.

Here we will learn use of interface objects and an array of interface objects in useState.

Let start today’s tutorial How to use interface in React hook useState?

First, take an example of an interface to use in variables.

it’s our interface

1interface IUser {
2 id: number;
3 name: string;
4 email: string;
5}

and when we want to use it as a referance in new veriable we will use colon syntax.

1let newUser:IUser = {
2 id: 1,
3 name: "infinitbility",
5};

but now how can the IUser interface used in our useState. check the Below example.

1const [user, setUser] = useState<IUser>({
2 id: 1,
3 name: "infinitbility",
5});

Now, move to the next level how we can define an array of interfaces in useState.

1const [user, setUser] = useState<Array<IUser>>([{
2 id: 1,
3 name: "infinitbility",
5}]);

Thanks for reading…

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo

Tutorials

Categories

More articles from Infinitbility

How to get first element of array in javascript?

How to get first element of array in javascript?

Example of get first element in javascript, React, React Native, vue, node, deno, and all javascript framework.

November 15th, 2021 · 1 min read
How to add icon in bottom tab navigation react native?

How to add icon in bottom tab navigation react native?

React Navigation icon tab navigation example.

November 12th, 2021 · 1 min read
© 2020–2021 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]