Form submission handling in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to prevent the default form submission behavior.

React

function MyForm() {
  const handleSubmit = (event) => {
    event.[1]();
    alert('Form submitted!');
  };

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

Drag options to blanks, or click blank then click option'

ApreventSubmit

BstopPropagation

Cpersist

DpreventDefault

Attempts:

3 left

💡 Hint

Common Mistakes

Using event.stopPropagation() instead of preventDefault()

Not calling any method to stop default behavior

Calling event.preventDefault() stops the browser from reloading the page on form submission.

2fill in blank

medium

Complete the code to update the state when the input value changes.

React

import { useState } from 'react';

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

  return (
    <form>
      <input
        type="text"
        value={name}
        onChange={e => setName([1])}
      />
    </form>
  );
}

Drag options to blanks, or click blank then click option'

Ae.target.value

Be.value

Ce.currentTarget.value

De.input.value

Attempts:

3 left

💡 Hint

Common Mistakes

Using e.value which is undefined

Using e.currentTarget.value which may not always be correct

The input's current value is accessed via e.target.value in the event handler.

3fill in blank

hard

Fix the error in the form submission handler to correctly log the input value.

React

import { useState } from 'react';

function MyForm() {
  const [email, setEmail] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log([1]);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <button type="submit">Send</button>
    </form>
  );
}

Drag options to blanks, or click blank then click option'

Aevent.target.value

Bemail

Ce.target.value

Devent.value

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to access event.target.value in the submit handler

Using undefined variables like e.target.value

The current input value is stored in the email state variable, so logging email shows the input.

4fill in blank

hard

Fill both blanks to create a controlled input that updates state and prevents default form submission.

React

import { useState } from 'react';

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

  const handleSubmit = (event) => {
    event.[1]();
    alert(text);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={text}
        onChange={e => setText(e.[2])}
      />
      <button type="submit">Go</button>
    </form>
  );
}

Drag options to blanks, or click blank then click option'

ApreventDefault

BstopPropagation

Cvalue

Dtarget.value

Attempts:

3 left

💡 Hint

Common Mistakes

Using stopPropagation instead of preventDefault

Using e.value instead of e.target.value

Use event.preventDefault() to stop form reload and e.target.value to get input changes.

5fill in blank

hard

Fill all three blanks to create a form that updates two inputs and logs their values on submit.

React

import { useState } from 'react';

function MyForm() {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');

  const handleSubmit = (event) => {
    event.[1]();
    console.log(`Full name: ${firstName} [2] ${lastName}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={firstName}
        onChange={e => setFirstName(e.[3])}
        placeholder="First Name"
      />
      <input
        value={lastName}
        onChange={e => setLastName(e.target.value)}
        placeholder="Last Name"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Drag options to blanks, or click blank then click option'

ApreventDefault

B+

C-

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using '-' instead of '+' to join strings

Not calling preventDefault() in submit handler

Using e.value instead of e.target.value

Use event.preventDefault() to stop reload, + to join names, and e.target.value to update state.

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