CODEWITHSUNDEEP
reactjstypescript
peter flanagan
peter flanagan

Reputation: 9790

onSubmit issue with form in react and tsx

I am looking at making a form in react + typescript.

It should just have a username and password.

My code looks like this

export default () => {
    const [username, updateUsername] = useState('');

    // I managed to figure out the part below:
    const updateUsername = (e: React.FormEvent<HTMLInputElement>): void => {
      setUsername(username: e.currentTarget.value);
    };

    const printValues = e => {
       e.preventDefault();
       console.log(e.currentTarget.value);
    }

    // cannot figure out what is wrong with onSubmit
    return (
        <form onSubmit={printValues}>
            <label>Username</label>
            <input 
                type='text'
                name='username'
                value={username}
                onChange={updateUsername}
            />
            <input type='submit' />
        </form>
    );
  }

I am seeing the following error:

enter image description here

Upvotes: 0

Views: 2124

Answers (1)

Hardik Modha
Hardik Modha

Reputation: 12736

As the suggestion says, Change the React.FormEvent<HTMLInputElement> to React.FormEvent<HTMLFormElement> and it should work.

Upvotes: 1

Related Questions