Form submission handling in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when this React form is submitted?

Consider this React component that handles a form submission. What will be the output in the console when the form is submitted with the input value 'hello'?

React

import React, { useState } from 'react';

export default function MyForm() {
  const [input, setInput] = useState('');

  function handleSubmit(event) {
    event.preventDefault();
    console.log(input);
  }

  return (
    <form onSubmit={handleSubmit} aria-label="simple form">
      <input
        type="text"
        value={input}
        onChange={e => setInput(e.target.value)}
        aria-label="text input"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

A The console logs an empty string ''.

B The console logs 'hello' exactly.

C The console logs 'undefined'.

D The console logs an error because event.preventDefault() is missing.

💡 Hint

Remember that event.preventDefault() stops the page from reloading and the input state updates on every change.

The input state updates as the user types. When the form submits, handleSubmit prevents the default reload and logs the current input value, which is 'hello'.

📝 Syntax

intermediate

Which option correctly prevents the default form submission behavior?

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

React

function handleSubmit(event) {
  // prevent default here
  console.log('Submitted');
}

A event.preventdefault()

B event.defaultPrevented = true

C event.stopPropagation()

D event.preventDefault()

💡 Hint

Check the exact spelling and casing of the method to prevent default browser behavior.

The correct method is event.preventDefault() with capital D and capital P. Other options are either misspelled or do different things.

❓ state_output

advanced

What is the value of 'submittedData' after submitting this form?

Given this React component, what will be the value of submittedData after the user types 'abc' and submits the form?

React

import React, { useState } from 'react';

export default function DataForm() {
  const [input, setInput] = useState('');
  const [submittedData, setSubmittedData] = useState(null);

  function handleSubmit(e) {
    e.preventDefault();
    setSubmittedData(input);
    setInput('');
  }

  return (
    <form onSubmit={handleSubmit} aria-label="data form">
      <input
        value={input}
        onChange={e => setInput(e.target.value)}
        aria-label="data input"
      />
      <button type="submit">Send</button>
      <p>Last submitted: {submittedData}</p>
    </form>
  );
}

A '' (empty string)

B null

C 'abc'

D undefined

💡 Hint

Remember that setSubmittedData is called before clearing the input state.

The submittedData state is set to the current input value 'abc' before the input is cleared, so it holds 'abc' after submit.

🔧 Debug

advanced

Why does this form submit reload the page despite calling preventDefault?

Look at this React form component. The page reloads on submit even though event.preventDefault() is called. What is the cause?

React

import React, { useState } from 'react';

export default function BuggyForm() {
  const [text, setText] = useState('');

  function handleSubmit(event) {
    event.preventDefault();
    console.log(text);
  }

  return (
    <form onSubmit={handleSubmit} aria-label="buggy form">
      <input value={text} onChange={e => setText(e.target.value)} aria-label="bug input" />
      <button type="submit">Go</button>
    </form>
  );
}

A The method preventdefault() is misspelled; it should be preventDefault().

B The input value is not controlled properly, causing reload.

C The form lacks a name attribute, causing default submit.

D The button type should be 'button' instead of 'submit'.

💡 Hint

Check the exact spelling and casing of the method used to stop default behavior.

The method is case sensitive. Using event.preventdefault() (lowercase d) is undefined, so the default submit happens causing reload.

🧠 Conceptual

expert

Why is it important to call event.preventDefault() in React form submissions?

In React, when handling form submissions, why do we call event.preventDefault() inside the submit handler?

A To stop the browser from reloading the page and losing React state on submit.

B To clear the form inputs automatically after submission.

C To validate the form inputs before sending data.

D To enable the form to submit data to the server asynchronously.

💡 Hint

Think about what happens by default when a form submits in a browser.

By default, form submission reloads the page which resets React state. Calling event.preventDefault() stops this reload so React can handle data and state smoothly.

Practice

1. What does event.preventDefault() do in a React form submission handler?

easy

A. It automatically submits the form data to the server.

B. It stops the browser from reloading the page when the form is submitted.

C. It clears all the input fields in the form.

D. It resets the component's state to initial values.

Solution

1. Step 1: Understand default form behavior

   By default, submitting a form reloads the page to send data to the server.

2. Step 2: Role of event.preventDefault()

   This method stops the default reload so you can handle submission in React code.

3. Final Answer:

   It stops the browser from reloading the page when the form is submitted. -> Option B

4. Quick Check:

   event.preventDefault() = stops reload [OK]

Hint: Remember: preventDefault stops page reload on submit [OK]

Common Mistakes:

• Thinking preventDefault clears inputs
• Assuming preventDefault submits data automatically
• Confusing preventDefault with resetting state

2. Which of the following is the correct way to attach a submit handler to a form in React?

easy

A.

B.

C.

D.

Solution

1. Step 1: Check React event naming conventions

   React uses camelCase for event handlers, so it must be onSubmit.

2. Step 2: Validate JSX syntax

   Attributes are case-sensitive; onsubmit is incorrect, must be onSubmit.

3. Final Answer:

   <form onSubmit={handleSubmit}> -> Option A

4. Quick Check:

   React event handlers use camelCase = onSubmit [OK]

Hint: React events use camelCase like onSubmit, not lowercase [OK]

Common Mistakes:

• Using lowercase onsubmit instead of onSubmit
• Using non-existent attributes like submit or onsubmitHandler
• Forgetting curly braces around handler function

3. What will be logged to the console when the form below is submitted?

function MyForm() {
  const [name, setName] = React.useState('');
  function handleSubmit(event) {
    event.preventDefault();
    console.log(name);
  }
  return (
    <form onSubmit={handleSubmit}>
      <input value={name} onChange={e => setName(e.target.value)} />
      <button type="submit">Send</button>
    </form>
  );
}

medium

A. The current value typed in the input field.

B. An empty string always.

C. Undefined because name is not set.

D. The string 'Send' from the button.

Solution

1. Step 1: Understand controlled input behavior

   The input's value is linked to state variable name, updated on every change.

2. Step 2: What happens on submit?

   On submit, handleSubmit logs the current name state, which matches input content.

3. Final Answer:

   The current value typed in the input field. -> Option A

4. Quick Check:

   Controlled input state logs current input [OK]

Hint: Controlled inputs keep state updated; submit logs that state [OK]

Common Mistakes:

• Assuming name is always empty on submit
• Confusing button text with input value
• Forgetting to call event.preventDefault()

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

function Form() {
  const [email, setEmail] = React.useState('');
  function handleSubmit() {
    event.preventDefault();
    alert(email);
  }
  return (
    <form onSubmit={handleSubmit}>
      <input value={email} onChange={e => setEmail(e.target.value)} />
      <button type="submit">Submit</button>
    </form>
  );
}

medium

A. Button type should be 'button' not 'submit'.

B. Using alert instead of console.log is not allowed.

C. Input value should not be controlled by state.

D. Missing event parameter in handleSubmit function.

Solution

1. Step 1: Check handleSubmit parameters

   The function uses event.preventDefault() but does not receive event as a parameter.

2. Step 2: Why is this a problem?

   Without event parameter, event is undefined, causing a runtime error.

3. Final Answer:

   Missing event parameter in handleSubmit function. -> Option D

4. Quick Check:

   Event must be passed to handler to call preventDefault [OK]

Hint: Always include event parameter to use event.preventDefault() [OK]

Common Mistakes:

• Forgetting to add event parameter
• Thinking alert is disallowed
• Confusing button types for form submission

5. You want to submit a form and then clear the input fields after submission. Which code snippet correctly handles this in React?

function ContactForm() {
  const [message, setMessage] = React.useState('');
  function handleSubmit(event) {
    event.preventDefault();
    console.log(message);
    // What goes here?
  }
  return (
    <form onSubmit={handleSubmit}>
      <textarea value={message} onChange={e => setMessage(e.target.value)} />
      <button type="submit">Send</button>
    </form>
  );
}

hard

A. message = ''; // Directly assign to state variable

B. event.target.reset(); // Reset form DOM directly

C. setMessage(''); // Reset state to empty string

D. window.location.reload(); // Reload page to clear form

Solution

1. Step 1: Understand controlled components

   The textarea's value is controlled by React state message, so clearing input means resetting this state.

2. Step 2: Why setMessage('') works best

   Calling setMessage('') updates state to empty string, clearing the textarea in UI.

3. Final Answer:

   setMessage(''); // Reset state to empty string -> Option C

4. Quick Check:

   Reset controlled input by updating state [OK]

Hint: Clear controlled inputs by setting state to empty string [OK]

Common Mistakes:

• Trying to assign directly to state variable
• Using event.target.reset() which doesn't update React state
• Reloading page instead of clearing state