Scribd
Upload
26 views

Controlled Elements in React

Controlled components in React refer to form input elements whose values are controlled by the state of a React component. This keeps the input value in sync with the component's state. To create a controlled input, you initialize a state variable to hold the value, bind the input's value prop to the state variable, and update state with an onChange handler. This ensures the state and input value remain synchronized as the source of truth.

Uploaded by

aslan.fedaoui
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
26 views

Controlled Elements in React

Controlled components in React refer to form input elements whose values are controlled by the state of a React component. This keeps the input value in sync with the component's state. To create a controlled input, you initialize a state variable to hold the value, bind the input's value prop to the state variable, and update state with an onChange handler. This ensures the state and input value remain synchronized as the source of truth.

Uploaded by

aslan.fedaoui
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

CONTROLLED

COMPONENTS

Controlled components (or elements) are a fundamental


concept in React when dealing with form inputs like text
fields, checkboxes, and radio buttons. A controlled
component refers to an input element whose value is
controlled by the state of a React component. This enables
you to keep the input's value in sync with the component's
state, making it easier to manage user interactions.
Here's how you create and manage a controlled input component
in React:

1. State Initialization: Start by initializing a state variable that will


hold the value of your input element. You typically do this using
the useState hook:

import React, { useState } from 'react';

function MyComponent() {
const [inputValue, setInputValue] = useState('');

return (
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
);
}

export default MyComponent;

2. Binding Value and onChange Event: In the example above,


the value prop of the input element is bound to the inputValue
state. This makes the input a controlled component. The
onChange event handler updates the state whenever the input
value changes.
By following this pattern, you ensure that the state and the input
value are always in sync, making React the source of truth for the
input's value.

Controlled components offer several benefits:

You have full control over the input's behavior and value.
You can apply validation and transformation logic before
updating the state.
You can easily reset or initialize the input value.
React's rendering is deterministic, which can help prevent
unexpected behavior.

Remember that when using controlled components, you should


always set the value prop and provide an onChange handler. If
you only set the value without an onChange, the input will become
read-only.

Controlled components are a key concept when working with


forms in React, enabling a more predictable and reliable way to
manage user input.

You might also like