Controlled components in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a controlled input that updates state on change.

React

import React, { useState } from 'react';

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

  return (
    <input
      type="text"
      value=[1]
      onChange={e => setName(e.target.value)}
      aria-label="Name input"
    />
  );
}

Drag options to blanks, or click blank then click option'

Aname

BsetName

Ce.target.value

D''

Attempts:

3 left

💡 Hint

Common Mistakes

Setting value to the setter function instead of the state variable.

Leaving value undefined, making the input uncontrolled.

The value attribute of the input must be set to the state variable name to make it a controlled component.

2fill in blank

medium

Complete the code to update the state when the input changes.

React

import React, { useState } from 'react';

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

  return (
    <input
      type="email"
      value={email}
      onChange=[1]
      aria-label="Email input"
    />
  );
}

Drag options to blanks, or click blank then click option'

Aemail => setEmail(email)

BsetEmail(e.target.value)

Ce.target.value

De => setEmail(e.target.value)

Attempts:

3 left

💡 Hint

Common Mistakes

Calling setEmail directly without a function.

Using the state variable instead of the event value.

The onChange handler receives an event e. We use it to update the state with setEmail(e.target.value).

3fill in blank

hard

Fix the error in the controlled textarea component.

React

import React, { useState } from 'react';

function MessageInput() {
  const [message, setMessage] = useState('');

  return (
    <textarea
      value={message}
      onChange=[1]
      aria-label="Message input"
    />
  );
}

Drag options to blanks, or click blank then click option'

AsetMessage(message)

Be => setMessage(e.target.value)

Ce => message = e.target.value

De => setMessage(message)

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to assign directly to the state variable.

Calling setMessage with the old state instead of the event value.

The onChange handler must be a function that updates the state with the event's target value.

4fill in blank

hard

Fill both blanks to create a controlled checkbox that toggles state.

React

import React, { useState } from 'react';

function SubscribeCheckbox() {
  const [subscribed, setSubscribed] = useState(false);

  return (
    <input
      type="checkbox"
      checked=[1]
      onChange=[2]
      aria-label="Subscribe checkbox"
    />
  );
}

Drag options to blanks, or click blank then click option'

Asubscribed

Be => setSubscribed(e.target.checked)

Csubscribed === true

De => setSubscribed(!subscribed)

Attempts:

3 left

💡 Hint

Common Mistakes

Using value instead of checked for checkbox.

Not updating state with e.target.checked.

The checkbox's checked attribute must be linked to the state variable subscribed. The onChange handler updates the state with the checkbox's checked value.

5fill in blank

hard

Fill all three blanks to create a controlled select dropdown that updates state.

React

import React, { useState } from 'react';

function FruitSelector() {
  const [fruit, setFruit] = useState('apple');

  return (
    <select
      value=[1]
      onChange=[2]
      aria-label="Fruit selector"
    >
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
      <option value="orange">Orange</option>
    </select>
  );
}

Drag options to blanks, or click blank then click option'

Afruit

Be => setFruit(e.target.value)

CsetFruit

De => fruit = e.target.value

Attempts:

3 left

💡 Hint

Common Mistakes

Assigning directly to the state variable.

Not using a function for onChange handler.

The value attribute is set to the state variable fruit. The onChange handler updates the state using setFruit with the event's target value.

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