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.