How to use useState hook in React with typescript correctly

0 votes

I'm attempting to create a login form in react using typescript. However, the setEmail method does not accept values. It says that an argument of type'string' cannot be assigned to a parameter of type 'SetStateAction.' What should I do to solve the problem?

image

Aug 3, 2022 in TypeSript by Elton
• 400 points
3,472 views

1 answer to this question.

0 votes

You can set a string type for it

Explicit way:

const [email, setEmail] = useState<string>('')

or Implicit way:

const [email, setEmail] = useState('')

or if you want to set number type

const [inputNumber, setInputNumber] = useState<number>(0);

then in jsx, do it this way

<input
  type="number"
  value={inputNumber}
  onChange={(val) => {
    //Some ways to do this
    setInputNumber(Number(val.target.value));
    setInputNumber(+val.target.value);
    setInputNumber(parseInt(val.target.value,0));
  }}
/>

If you need to know more about React, Its recommended to join React JS course today.

answered Aug 3, 2022 by Abhinaya
• 1,160 points

Related Questions In TypeSript

0 votes
1 answer

How to use useState hook in React with TypeScript correctly?

Without any initial argument, the type of email and setEmail will ...READ MORE

answered Jun 10, 2022 in TypeSript by Nina
• 3,060 points
1,668 views
0 votes
1 answer

How to use moment.js library in angular 2 typescript app?

REFERENCE: https://momentjs.com/docs/#/use-it/typescript/ You can install this by using: npm install ...READ MORE

answered Jun 1, 2022 in TypeSript by Nina
• 3,060 points
1,305 views
0 votes
1 answer

how to use spread syntax and new Set() with TypeScript

The ... operator should work on anything ...READ MORE

answered Jun 10, 2022 in TypeSript by Nina
• 3,060 points
254 views
0 votes
1 answer

How to use document.getElementById() method in TypeScript?

Typescript will force you to check the ...READ MORE

answered Jun 15, 2022 in TypeSript by Nina
• 3,060 points
6,082 views
0 votes
1 answer

How to use next-seo for setting nextjs meta tag with multiple OGP images?

https://github.com/garmeeh/next-seo use this git repo that contains ...READ MORE

answered Feb 24, 2022 in Others by narikkadan
• 63,420 points
5,039 views
0 votes
1 answer

"SyntaxError: Invalid or unexpected token" - How to SSR images/css with react

The first thing to highlight is that ...READ MORE

answered Jun 1, 2022 in CSS by Edureka
• 12,690 points
3,732 views
0 votes
1 answer

Typescript: Property "XXX" does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes

Double check the newly added object types. ...READ MORE

answered Jun 8, 2022 in TypeSript by Nina
• 3,060 points
43,707 views
0 votes
1 answer

TypeScript and React Native: Are the type definitions for RN styles wrong?

You can test some of ways for ...READ MORE

answered Jun 10, 2022 in TypeSript by Nina
• 3,060 points
3,034 views
0 votes
1 answer
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP