TypeScript Part 1: TypeScript Form Event Cheat Book with React Theory for Beginners

TypeScript Form Event Cheat Book with React Theory for Beginners before we start practical code with React JS

In this article , we’ll explore TypeScript’s powerful features in combination with React, focusing on form event handling.

This guide is tailored for beginners, providing clear explanations and practical examples to help you grasp the fundamentals.

FORM DATA

In JavaScript, FormData is an object that represents a set of key/value pairs representing form fields and their values.

It provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be sent using the XMLHttpRequest or fetch APIs to submit forms asynchronously.

React.FormEvent<HTMLFormElement>

<HTMLFormElement>: This part specifies the type of the target element that the event is associated with. In this case, it's a HTMLFormElement, meaning it's an event associated with an HTML <form> element.

React.FormEvent: This part refers to the event object itself. It's a generic type provided by React to represent events in forms.

React.FormEvent<HTMLFormElement> is a type that represents an event object associated with form elements. Specifically, it's an event object that's triggered when a form is submitted.

So, React.FormEvent<HTMLFormElement> describes an event object that is triggered when a form element (specifically, a <form> element) is submitted within a React component.

This type provides TypeScript with information about the structure and properties of the event object, allowing for type-safe handling of form submission events in React components

React.ChangeEvent<HTMLInputElement>

<HTMLInputElement>: This part specifies the type of the target element that the event is associated with. In this case, it's an HTMLInputElement, meaning it's an event associated with an HTML <input> element.

React.ChangeEvent: This part refers to the event object itself. It's a generic type provided by React to represent change events.

React.ChangeEvent<HTMLInputElement> is a type that represents an event object associated with input elements. More specifically, it's an event object that's triggered when the value of an input element changes.

So, React.ChangeEvent<HTMLInputElement> describes an event object that is triggered when the value of an input element (specifically, an <input> element) changes within a React component. This type provides TypeScript with information about the structure and properties of the event object, allowing for type-safe handling of input change events in React components.

Form Example with Coding :)

If you find my blogs helpful, then please subscribe ,Claps and follow to support me in GitHub too

Thank You, enjoy your Journey !!!

Kind is cool !!! Share knowledge to gain knowledge !!!! Be kind and treat people with respect !!! If you find my videos helpful, then please subscribe , Claps and follow to support

Cheers,

Kirti Kaushal

Follow Part 2 with Partical Example