Handling input fields in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when typing in this controlled input?

Consider this React component that manages an input field:

import React, { useState } from 'react';

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

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

What will be the value shown in the input box after the user types the characters "abc"?

React

import React, { useState } from 'react';

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

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

A The input box will show "undefined" because the value is not set properly.

B The input box will remain empty because the value is controlled and never updated.

C The input box will show "a" only, ignoring the rest.

D The input box will show "abc" as typed by the user.

💡 Hint

Think about how the value and onChange props work together in controlled inputs.

The component uses React state name to store the input value. The onChange handler updates this state with the typed characters. Because the input's value is set to name, the input box shows exactly what the user types.

📝 Syntax

intermediate

Which option correctly updates multiple input fields in React state?

You want to handle two input fields, "email" and "password", using a single state object. Which code snippet correctly updates the state when either input changes?

React

import React, { useState } from 'react';

function LoginForm() {
  const [form, setForm] = useState({ email: '', password: '' });

  function handleChange(e) {
    const { name, value } = e.target;
    // Update state here
  }

  return (
    <>
      <input name="email" value={form.email} onChange={handleChange} />
      <input name="password" value={form.password} onChange={handleChange} />
    </>
  );
}

A setForm(prev => ({ ...prev, [name]: value }));

B setForm({ [name]: value });

C setForm({ form, [name]: value });

D setForm(prev => ({ [name]: value }));

💡 Hint

Remember to keep the other fields unchanged when updating one field in an object state.

Option A uses the functional form of setForm and spreads the previous state to keep other fields intact, then updates only the changed field. Other options either overwrite the entire state or use incorrect syntax.

🔧 Debug

advanced

Why does this input not update when typing?

Look at this React component:

function TextInput() {
  const [text, setText] = React.useState('');

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

Why does the input box stay empty when typing?

React

function TextInput() {
  const [text, setText] = React.useState('');

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

A Because setText is not called with the new value; it is passed as a function reference instead of being invoked.

B Because the initial state is empty and never changes.

C Because the input is missing a name attribute.

D Because the onChange event is not supported on input elements.

💡 Hint

Check how the onChange handler updates the state.

The onChange handler passes the function setText itself instead of calling it with the new value. It should be onChange={e => setText(e.target.value)} to update the state properly.

❓ state_output

advanced

What is the final state after typing 'hi' in this input?

Consider this React component:

function UppercaseInput() {
  const [text, setText] = React.useState('');

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

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

What will be the value of text after the user types the characters "hi"?

React

function UppercaseInput() {
  const [text, setText] = React.useState('');

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

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

A "Hi"

B "hi"

C "HI"

D "hI"

💡 Hint

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

The handleChange function converts the input value to uppercase before updating the state. So typing "hi" results in the state being "HI".

🧠 Conceptual

expert

Why use controlled inputs over uncontrolled inputs in React?

Which of the following is the best reason to prefer controlled inputs (where React state manages the input value) over uncontrolled inputs (where the DOM manages the input value)?

A Controlled inputs do not need event handlers to update state.

B Controlled inputs allow React to fully manage and validate input data, enabling features like instant validation and conditional disabling.

C Controlled inputs require less code and are simpler to implement than uncontrolled inputs.

D Controlled inputs automatically improve performance by reducing re-renders.

💡 Hint

Think about what control over input value enables in React apps.

Controlled inputs let React keep the source of truth for input values, which allows easy validation, conditional UI changes, and synchronization with other state. Other options are incorrect because controlled inputs often require more code and event handlers, and do not inherently improve performance.