Form handling in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this controlled form component?

Consider this React component that handles a simple text input form. What will be displayed below the input after typing 'hello'?

React

import React, { useState } from 'react';

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

  return (
    <form>
      <label htmlFor="nameInput">Name:</label>
      <input
        id="nameInput"
        type="text"
        value={name}
        onChange={e => setName(e.target.value)}
        aria-label="Name input"
      />
      <p>Hello, {name}!</p>
    </form>
  );
}

export default GreetingForm;

A The page shows an input box but the text below remains empty regardless of typing.

B The page shows an input box and below it the text 'Hello, hello!' after typing 'hello'.

C The page shows an input box and below it the text 'Hello, !' always, ignoring input.

D The page crashes with a runtime error when typing in the input.

💡 Hint

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

This component uses a controlled input where the value is tied to React state. Typing updates the state via setName, which re-renders the component and updates the displayed greeting.

📝 Syntax

intermediate

Which option correctly prevents the default form submission behavior?

In React, to stop a form from refreshing the page on submit, which code snippet correctly prevents the default event?

React

function MyForm() {
  const handleSubmit = (event) => {
    // What goes here?
  };

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

A return false;

B event.stopPropagation();

C event.defaultPrevented = true;

D event.preventDefault();

💡 Hint

Look for the standard method to stop default browser actions.

The method event.preventDefault() stops the form from submitting and refreshing the page. Other options either stop event bubbling or are invalid.

🔧 Debug

advanced

Why does this React form input not update on typing?

This React component renders an input but typing does not change the input value. What is the cause?

React

import React, { useState } from 'react';

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

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

export default FixedInput;

A The input type should be 'controlled' instead of 'text' to update.

B The input is missing a name attribute, so React ignores changes.

C The onChange handler sets the state to the old value, so input never updates.

D The useState hook is not initialized properly with an empty string.

💡 Hint

Check what value is passed to setText inside onChange.

The onChange handler uses setText(text), which sets the state to the current value, ignoring the new input. It should use e.target.value from the event.

❓ state_output

advanced

What is the final state value after submitting this form?

Given this React component, what is the value of submittedName after typing 'Anna' and clicking submit?

React

import React, { useState } from 'react';

function SubmitName() {
  const [name, setName] = useState('');
  const [submittedName, setSubmittedName] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    setSubmittedName(name);
    setName('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={e => setName(e.target.value)}
        aria-label="name input"
      />
      <button type="submit">Submit</button>
      <p>Submitted: {submittedName}</p>
    </form>
  );
}

export default SubmitName;

A 'Anna'

B '' (empty string)

C undefined

D null

💡 Hint

Look at what value is saved to submittedName on submit.

On submit, submittedName is set to the current name value, which is 'Anna'. Then name is cleared, but submittedName keeps the submitted value.

🧠 Conceptual

expert

Which statement about controlled vs uncontrolled components in React forms is true?

Select the correct statement about controlled and uncontrolled form components in React.

A Controlled components store form data in React state and update on every input change.

B Uncontrolled components require React state to update input values on every keystroke.

C Controlled components use refs to access form values directly from the DOM.

D Uncontrolled components prevent default form submission automatically.

💡 Hint

Think about where the form data lives in controlled vs uncontrolled inputs.

Controlled components keep the input value in React state and update it on every change. Uncontrolled components rely on the DOM to hold the value and use refs to access it.

Practice

1. What is the main purpose of using useState in React form handling?

easy

A. To automatically validate form inputs

B. To style the form elements dynamically

C. To send form data directly to the server

D. To store and update the current value of form inputs

Solution

1. Step 1: Understand useState role in React

   useState is used to create a state variable that holds data and can be updated.

2. Step 2: Connect useState to form inputs

   In form handling, useState stores the current input value and updates it on user typing.

3. Final Answer:

   To store and update the current value of form inputs -> Option D

4. Quick Check:

   useState manages input values = A [OK]

Hint: useState holds input values and updates on change [OK]

Common Mistakes:

• Thinking useState styles elements
• Assuming useState sends data to server
• Confusing useState with validation logic

2. Which of the following is the correct way to update state on input change in React?

easy

A. onChange={(e) => setValue(e.target.value)}

B. onChange={() => setValue(e.value)}

C. onChange={(e) => setValue(e.target)}

D. onChange={(e) => setValue(e.currentTarget)}

Solution

1. Step 1: Identify correct event target usage

   The input value is accessed via e.target.value in event handlers.

2. Step 2: Confirm correct syntax for setState call

   Using setValue(e.target.value) updates state with the input's current value.

3. Final Answer:

   onChange={(e) => setValue(e.target.value)} -> Option A

4. Quick Check:

   Use e.target.value to get input value [OK]

Hint: Use e.target.value inside onChange to update state [OK]

Common Mistakes:

• Using e.value instead of e.target.value
• Passing e.target or e.currentTarget directly
• Omitting the event parameter e

3. What will be the output when the following React component is rendered and the user types 'Hi' in the input?

function GreetingForm() {
  const [name, setName] = React.useState('');
  return (
    <form>
      <input value={name} onChange={e => setName(e.target.value)} />
      <p>Hello, {name}!</p>
    </form>
  );
}

medium

A. The page reloads on typing

B. The paragraph shows 'Hello, Hi!' as user types 'Hi'

C. The paragraph remains empty regardless of input

D. The input clears automatically after typing

Solution

1. Step 1: Understand controlled input behavior

   The input value is controlled by state variable 'name' which updates on change.

2. Step 2: Observe paragraph rendering with state

   The paragraph displays 'Hello, {name}!' so it updates live as 'name' changes.

3. Final Answer:

   The paragraph shows 'Hello, Hi!' as user types 'Hi' -> Option B

4. Quick Check:

   Controlled input updates state and display = D [OK]

Hint: Controlled inputs update state and display live [OK]

Common Mistakes:

• Expecting input to clear automatically
• Thinking paragraph won't update
• Assuming page reloads on input change

4. Identify the error in this React form submission handler:

function handleSubmit(e) {
  alert('Submitted');
}

What is missing to prevent the page from reloading on submit?

medium

A. Call e.preventDefault() inside handleSubmit

B. Use return false at the end of handleSubmit

C. Wrap alert in a setTimeout function

D. No error, the code works fine

Solution

1. Step 1: Understand default form submit behavior

   By default, form submission reloads the page unless prevented.

2. Step 2: Prevent default reload in React

   Calling e.preventDefault() inside the submit handler stops the reload.

3. Final Answer:

   Call e.preventDefault() inside handleSubmit -> Option A

4. Quick Check:

   Use e.preventDefault() to stop reload [OK]

Hint: Always call e.preventDefault() in submit handlers [OK]

Common Mistakes:

• Forgetting to pass event parameter e
• Using return false instead of preventDefault
• Assuming alert stops reload

5. You want to handle multiple input fields in one React form using a single state object. Which code snippet correctly updates the state for the changed input field?

const [formData, setFormData] = React.useState({ email: '', password: '' });

function handleChange(e) {
  // What goes here?
}

hard

A. setFormData({ e.target.name: e.target.value });

B. setFormData({ formData[e.target.name]: e.target.value });

C. setFormData({ ...formData, [e.target.name]: e.target.value });

D. setFormData({ [e.target.value]: e.target.name });

Solution

1. Step 1: Understand updating nested state objects

   To update one field in an object state, copy existing fields with spread operator.

2. Step 2: Use computed property name for dynamic key

   Use [e.target.name] to dynamically update the correct field with new value.

3. Final Answer:

   setFormData({ ...formData, [e.target.name]: e.target.value }); -> Option C

4. Quick Check:

   Spread old state + dynamic key update = B [OK]

Hint: Use spread and [e.target.name] to update form object state [OK]

Common Mistakes:

• Overwriting entire state without spreading
• Using invalid object key syntax
• Swapping name and value in update