Scribd
Upload
16 views

43 - Controlled Components

The document discusses controlled and uncontrolled components in React forms. Controlled components store their form data in the component's state rather than within the DOM. They require event handlers that update the state on every change to the input, and setState() must be used to update the state. This gives the component better control over the form elements and data compared to uncontrolled components.

Uploaded by

itprabhu.automation
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
16 views

43 - Controlled Components

The document discusses controlled and uncontrolled components in React forms. Controlled components store their form data in the component's state rather than within the DOM. They require event handlers that update the state on every change to the input, and setState() must be used to update the state. This gives the component better control over the form elements and data compared to uncontrolled components.

Uploaded by

itprabhu.automation
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 6

PART-43

Controlled
Components In React
Form REACT
PRESENTER: MOHAMMAD ADIL
Humble Request REACT

Techno Verse YT

Heavenly Delicious
Creating Form REACT

• There are mainly two types of form input in React.


• Controlled component
• Uncontrolled component
FORM
ENTER NAME
Component’s
State

onChange
On Submit

Validation
Form Data Get Form Data Get
Action
etc
Controlled Component REACT

• In HTML, form elements typically maintain their own state and


update it according to the user input.
• In the controlled component, the input form element is handled by the
component rather than the DOM.
• Here, the mutable state is kept in the state property and will be
updated only with setState() method.
Controlled Component REACT

• Controlled components have functions that govern the data passing


into them on every onChange event, rather than grabbing the data only
once, e.g., when you click a submit button.
• This data is then saved to state and updated with setState() method or
useState() Hook. This makes component have better control over the
form elements and data.

You might also like