How to use useState hook in React with typescript correctly

Question

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?

Answer 1

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.