Day 23 of 50 Days of React: Forms and Controlled Vs Uncontrolled Components.

2 min readAug 14, 2022

Hi Dev’s👋🏻, Let’s see Forms in React.

HTML form elements work a little bit differently from other DOM elements in React because form elements naturally keep some internal state.

In HTML form elements such as <input>, <textarea>, and <select> typically maintain their own state and update it based on user input. In React mutable state is typically kept in the state property of components and only update with useState().

There are two types of Components😁.

Controlled Components
Uncontrolled Components

Controlled Components😍

The form has the default HTML behavior of browsing to a new page when the user submits the forms. If you want this behavior in React, it just works. But in most cases, it’s convenient to have a JS function that handles the submission of the form have access to the data that the user entered in the form. The standard way to achieve this is with a technique called Controlled components.

In a controlled component form data is handled by a React Component.

When use a controlled Component👌

You need to write an event handler for every input. Yur data can change and pipe all of the input states through a React Component.

Uncontrolled Component😉

In a controlled component form data is handled by a React component. The alternative is an uncontrolled component instead of writing an event handler for every state update you can use a ref to get the values from the dom.