Section 1.1: Understanding Controlled Components

In Controlled Components, the state of the form data is managed by the React component itself. This means React has full authority over the form inputs, and the current value of each input is determined by the React state, ensuring a singular source of truth.

Why Opt for Controlled Components?

• Predictability: With the state managed by React, data flow becomes more predictable.
• Consistency: This approach guarantees a uniform state throughout your application.
• Integration: It allows for easier integration with other UI elements and state management tools.

Here’s a simple example demonstrating a Controlled Component:

function ControlledComponent() {

const [value, setValue] = React.useState('');

const handleChange = (event) => {

setValue(event.target.value);

};

return (

<form>

<label>

Name:

<input type="text" value={value} onChange={handleChange} />

</label>

</form>

);

}

In this code, the value of the input field is directly linked to the component's state. The handleChange function updates the state with each keystroke, emphasizing the tightly coupled nature of user input and component state, which characterizes Controlled Components.

Section 1.2: Exploring Uncontrolled Components

In contrast, Uncontrolled Components manage form data through the DOM directly, meaning React does not oversee the input state.

Why Choose Uncontrolled Components?

• Simplicity: Less coding is required since you aren't managing state.
• Familiarity: This approach resembles traditional HTML form inputs.
• Flexibility: It integrates more easily with non-React code and third-party libraries.

Consider the following example of an Uncontrolled Component:

function UncontrolledComponent() {

const inputRef = React.useRef();

const handleSubmit = (event) => {

alert('A name was submitted: ' + inputRef.current.value);

event.preventDefault();

};

return (

<form onSubmit={handleSubmit}>

<label>

Name:

<input type="text" ref={inputRef} />

</label>

<button type="submit">Submit</button>

</form>

);

}

In this case, the <input> element is an Uncontrolled Component because its value is not managed by React's state but accessed via a reference. When the form is submitted, the input's current value is fetched directly from the DOM using inputRef.current.value.

Combining Controlled and Uncontrolled Components

In practical applications, the decision between Controlled and Uncontrolled Components may not be clear-cut. You can often combine both approaches within a single form for optimal results. For instance, you might choose Controlled Components for fields that need validation while using Uncontrolled Components for simpler inputs, like file uploads, where state management isn't essential.

Here’s an example that illustrates this combination:

import React, { useState, useRef } from 'react';

function CombinedComponent() {

const [email, setEmail] = useState('');

const fileInputRef = useRef();

const handleSubmit = (event) => {

event.preventDefault();

console.log('Email:', email);

console.log('File:', fileInputRef.current.files[0]);

};

return (

<form onSubmit={handleSubmit}>

<label>

Email:

<input

type="email"

value={email}

onChange={(e) => setEmail(e.target.value)}

/>

</label>

<label>

Upload file:

<input type="file" ref={fileInputRef} />

</label>

<button type="submit">Submit</button>

</form>

);

}