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.