Controlled components in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this controlled input component?

Consider this React component that uses a controlled input. What will be displayed when the user types 'hello'?

React

import React, { useState } from 'react';

function ControlledInput() {
  const [text, setText] = useState('');

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={e => setText(e.target.value)}
        aria-label="input-text"
      />
      <p>{text}</p>
    </div>
  );
}

export default ControlledInput;

A The input will not accept any typing.

B The paragraph will display 'hello' as the user types.

C The paragraph will remain empty regardless of typing.

D The paragraph will display the reversed string of the input.

💡 Hint

Think about how the state updates on input change and how it affects the paragraph.

The component uses a controlled input where the input's value is tied to the state variable text. When the user types, onChange updates text, which then updates the paragraph content. So the paragraph shows exactly what the user types.

❓ state_output

intermediate

What is the value of state after this input change?

Given this controlled component, what will be the value of name state after the user types 'React'?

React

import React, { useState } from 'react';

function NameInput() {
  const [name, setName] = useState('');

  function handleChange(e) {
    setName(e.target.value.toUpperCase());
  }

  return <input type="text" value={name} onChange={handleChange} aria-label="name-input" />;
}

export default NameInput;

A "React"

B "react"

C "REACT"

D "" (empty string)

💡 Hint

Look at how the input value is transformed before setting state.

The handleChange function converts the input value to uppercase before setting the state. So typing 'React' results in state being 'REACT'.

📝 Syntax

advanced

Which option causes a syntax error in this controlled component?

Identify which code snippet will cause a syntax error when used as a controlled input in React.

A const [value, setValue] = useState(''); return <input value={value} onChange={e => setValue(e.target.value) />;

B const [value, setValue] = useState(''); return <input value={value} onChange={e => setValue(e.target.value)} />;

C const [value, setValue] = useState(''); return <input value={value} onChange={e => setValue(e.target.value) } />;

D ;>/ })eulav.tegrat.e(eulaVtes >= e{=egnahCno }eulav{=eulav tupni< nruter ;)''(etatSesu = ]eulaVtes ,eulav[ tsnoc

💡 Hint

Check the JSX syntax carefully, especially the closing of the input tag.

Option A has an incorrect closing of the input tag: / > instead of />. This causes a syntax error in JSX.

🔧 Debug

advanced

Why does this controlled input not update on typing?

Look at this React component. Why does the input not show any typed characters?

React

import React, { useState } from 'react';

function BrokenInput() {
  const [text, setText] = useState('');

  return <input type="text" value={text} onChange={() => setText('')} aria-label="broken-input" />;
}

export default BrokenInput;

A The value prop is missing, so input is uncontrolled and does not update.

B The input type is incorrect and does not accept text.

C The useState hook is not initialized properly.

D The onChange handler resets the state to empty string on every change, so input never updates.

💡 Hint

Check what the onChange function does to the state.

The onChange handler sets the state to an empty string every time the input changes. This means the input value is always reset to empty, so the user cannot type anything visible.

🧠 Conceptual

expert

What is the main advantage of controlled components in React?

Why do React developers prefer controlled components for form inputs?

A They allow React state to fully control the form data, enabling validation and conditional rendering easily.

B They automatically optimize performance by avoiding re-renders.

C They require less code than uncontrolled components.

D They allow direct DOM manipulation for faster updates.

💡 Hint

Think about how controlled components relate to React state and UI updates.

Controlled components keep the form data in React state, making it easy to validate input, conditionally render UI, and keep data consistent. They do not inherently optimize performance or reduce code length.

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