Controlled components in React - Mini Project: Build & Apply

Controlled Components in React

📖 Scenario: You are building a simple React form where users can type their name. The form input should be controlled by React state to keep the input value in sync with the component.

🎯 Goal: Create a React functional component with a controlled text input. The input value should be stored in state and updated as the user types.

📋 What You'll Learn

Create a React functional component named NameForm

Initialize a state variable called name with an empty string

Add an <input> element of type text controlled by the name state

Update the name state on every input change using an onChange handler

💡 Why This Matters

🌍 Real World

Controlled components are used in React forms to keep the UI and data in sync, making it easier to validate and manage user input.

💼 Career

Understanding controlled components is essential for React developers building interactive forms and user interfaces.

1

Set up the React component and state

Create a React functional component called NameForm. Inside it, use the useState hook to create a state variable named name initialized to an empty string "".

React

import React, { useState } from 'react';

function NameForm() {
  // Create state variable 'name' with initial value ''
  // Your code here
}

Hint

Use const [name, setName] = useState("") inside the NameForm function.

2

Add the controlled input element

Inside the NameForm component, add an <input> element of type text. Set its value attribute to the name state variable.

React

import React, { useState } from 'react';

function NameForm() {
  const [name, setName] = useState("");
  // Add an input element with value set to 'name'
  // Your code here
}

Hint

Return an <input> element with value={name} inside the component.

3

Add the onChange handler to update state

Add an onChange event handler to the <input> element. The handler should update the name state using setName with the current input value from event.target.value.

React

import React, { useState } from 'react';

function NameForm() {
  const [name, setName] = useState("");
  return (
    
  );
}

Hint

Use onChange={event => setName(event.target.value)} on the input element.

4

Complete the component with a label and export

Wrap the <input> in a <label> with the text Name:. Also, add export default NameForm; at the end of the file.

React

import React, { useState } from 'react';

function NameForm() {
  const [name, setName] = useState("");
  return (
    // Wrap input in a label with text 'Name:'
    // Your code here
  );
}

// Export the component
// Your code here

Hint

Wrap the input inside <label> with text Name: and add export default NameForm; at the end.

Practice

1. What is a controlled component in React?

easy

A. A component that does not use state at all

B. A component that controls other components' rendering

C. A form input element whose value is controlled by React state

D. A component that uses refs to access DOM elements

Solution

1. Step 1: Understand controlled components

   Controlled components are form inputs whose values are managed by React state, not by the DOM alone.

2. Step 2: Identify the correct definition

   A form input element whose value is controlled by React state correctly describes this concept as React controlling the input value via state.

3. Final Answer:

   A form input element whose value is controlled by React state -> Option C

4. Quick Check:

   Controlled component = React state controls input value [OK]

Hint: Controlled means React state holds the input value [OK]

Common Mistakes:

• Confusing controlled with uncontrolled components
• Thinking refs control input value
• Assuming controlled means no state usage

2. Which of the following is the correct way to create a controlled input in React?

easy

A.

B.

C.

D.

Solution

1. Step 1: Check controlled input syntax

   A controlled input must have its value set from state and update state on change.

2. Step 2: Analyze options

   <input value={this.state.text} onChange={this.handleChange} /> uses value from state and onChange handler to update it, which is correct.

3. Final Answer:

   <input value={this.state.text} onChange={this.handleChange} /> -> Option A

4. Quick Check:

   Value + onChange = controlled input [OK]

Hint: Controlled input needs value and onChange props [OK]

Common Mistakes:

• Using defaultValue instead of value for controlled inputs
• Omitting onChange handler
• Not linking value to state

3. What will be the output when typing in this controlled input?

function MyInput() {
  const [text, setText] = React.useState('');
  return (
    <input value={text} onChange={e => setText(e.target.value)} />
  );
}

medium

A. The input updates and shows what the user types

B. The input stays empty and does not update

C. The input throws a runtime error

D. The input shows the initial empty string and ignores typing

Solution

1. Step 1: Understand the controlled input behavior

   The input's value is linked to state variable 'text'. The onChange updates 'text' with user input.

2. Step 2: Predict the input behavior

   As user types, onChange updates state, which updates value, so input shows typed characters.

3. Final Answer:

   The input updates and shows what the user types -> Option A

4. Quick Check:

   State updates input value = visible typing [OK]

Hint: State + onChange updates input value dynamically [OK]

Common Mistakes:

• Thinking input won't update without defaultValue
• Assuming input is uncontrolled without onChange
• Confusing initial state with input behavior

4. Identify the error in this controlled component code:

function Form() {
  const [name, setName] = React.useState('');
  return (
    <input value={name} onChange={e => setName} />
  );
}

medium

A. The useState hook is missing an initial value

B. The value prop should be defaultValue

C. The input element is missing a closing tag

D. The onChange handler does not call setName with the new value

Solution

1. Step 1: Check onChange handler usage

   The onChange handler is set to 'e => setName' which is a function reference, not a call with the new value.

2. Step 2: Correct onChange handler

   It should be 'e => setName(e.target.value)' to update state with input value.

3. Final Answer:

   The onChange handler does not call setName with the new value -> Option D

4. Quick Check:

   onChange must call setState with event value [OK]

Hint: onChange must call setState with event target value [OK]

Common Mistakes:

• Passing setName without calling it
• Using defaultValue instead of value in controlled input
• Forgetting to pass initial state to useState

5. You want to create a controlled textarea that converts all input to uppercase as the user types. Which code snippet correctly implements this?

hard

A. const [text, setText] = React.useState('');
return

B. const [text, setText] = React.useState('');
return

C. const [text, setText] = React.useState('');
return

D. const [text, setText] = React.useState('');
return

Solution

1. Step 1: Understand controlled textarea with uppercase transformation

   The textarea's value must come from state, and onChange must update state with uppercase input.

2. Step 2: Analyze each option

   const [text, setText] = React.useState(''); return <textarea value={text} onChange={e => setText(e.target.value.toUpperCase())} />; updates state with uppercase input on change and sets value from state, so textarea shows uppercase as typed.

3. Final Answer:

   const [text, setText] = React.useState(''); return <textarea value={text} onChange={e => setText(e.target.value.toUpperCase())} />; -> Option B

4. Quick Check:

   Update state with uppercase input onChange = uppercase textarea [OK]

Hint: Transform input in onChange before setting state [OK]

Common Mistakes:

• Transforming value prop instead of input value
• Using defaultValue in controlled component
• Not updating state with transformed input