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.