Warning: session_start(): open(/tmp/sess_f0386bdebd5e3c383fa389382d136239, O_RDWR) failed: Disk quota exceeded (122) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: session_start(): Failed to read session data: files (path: /tmp) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_mkdir() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 562

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230
How To Type The onSubmit Event In React And TypeScript - LearnShareIT

How To Type The onSubmit Event In React And TypeScript

Type the onSubmit event in React and TypeScript

In this article, you will find the method to type the onSubmit event in React and TypeScript. We will show you how to use React.FormEvent<HTMLFormElement> to do this. Read this article to the end for more detailed information.

Type the onSubmit event in React and TypeScript

In React and TypeScript, the FormEvent interface is used for onSubmit events. Hence, we can use the ‘React.FormEvent<HTMLFormElement>’ to type the onSubmit event. 

It is very easy to check for the event type. You write the event inline, then hover on the event object. A message will appear, and you can see the event object type is React.FormEvent <HTMLFormElement>.

import React, {useState} from 'react';
 
const Demo = () => {
  const [message, setMessage] = useState('');
 
  return (
    <div className='container'>
      {/* write the event handler inline  */}
      <form id='myFormID' className='myFormClassName' onSubmit={event => console.log(event)}>
        <b className='title'><label>Enter your message</label></b>
        <input
          type="text"
          id="message"
          name="message"
          value={message}
          onChange={event => setMessage(event.target.value)}
        />
       
        <button className='btn btn-primary' type="submit">Submit</button>
      </form>
    </div>
  );
};
 
export default Demo;

TypeScript can infer the type of the event itself when we write it inline. This method is advantageous. It can be applied not only to the onSubmit event but also to all other events.

When you already know what exactly is the type of the event, you can extract your handler function and type its exact type. Take a look at the following example:

import React, {useState} from 'react';
 
const Demo = () => {
  const [message, setMessage] = useState('');
 
  // Type event as React.FormEvent<HTMLFormElement>
  const handleOnSubmitEvent= (event: React.FormEvent<HTMLFormElement>) => {
    // Prevent page refresh
    event.preventDefault();
   
    // Access properties
    console.log(event.currentTarget.id);
    console.log(event.currentTarget.className);
    console.log(event.currentTarget.childElementCount);
 
  };
 
  return (
    <div className='container'>
      <form id='myFormID' className='myFormClassName' onSubmit={handleOnSubmitEvent}>
        <b className='title'><label>Enter your message</label></b>
        <input
          type="text"
          id="message"
          name="message"
          value={message}
          onChange={event => setMessage(event.target.value)}
        />
       
        <button className='btn btn-primary' type="submit">Submit</button>
      </form>
    </div>
  );
};
 
export default Demo;

Output:

In the above example, we create the function ‘handleOnSubmitEvent’, whose input parameter is an event object of type ‘React.FormEvent<HTMLFormElement’. The PreventDefault() method is used to avoid reloading the page every time the user submits the form.

At this point, you can access the properties of the element that is attached to the event through the ‘currentTarget’ property. Like in this example, we have access to properties like: ‘id’, ‘className’, and ‘childElementCount’ of the object that fired the event. You can practice by accessing the properties you want and printing them on the console.

Summary

To sum up, we just showed you how to use React.FormEvent<HTMLFormElement> to type the onSubmit event in React and TypeScript. Hopefully, the above information is helpful for you. Thanks for reading the whole post.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *