Form handling in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a state variable for the input value using React hooks.

React

const [inputValue, [1]] = useState('');

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

AinputHandler

BhandleChange

CsetInputValue

DvalueSetter

Attempts:

3 left

💡 Hint

Common Mistakes

Using a name that doesn't start with 'set' for the update function.

Confusing the state variable with the update function.

In React, useState returns a pair: the current state and a function to update it. The convention is to name the update function starting with 'set'.

2fill in blank

medium

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

React

function handleChange(event) {
  [1](event.target.value);
}

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

AinputValue

BsetInputValue

ChandleChange

DuseState

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to assign directly to the state variable.

Calling the wrong function or using the event object incorrectly.

The update function from useState is called with the new value to update the state.

3fill in blank

hard

Fix the error in the form submission handler to prevent page reload.

React

function handleSubmit(event) {
  [1];
  alert('Form submitted with: ' + inputValue);
}

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

Aevent.preventDefault()

Bevent.stopPropagation()

Cevent.persist()

Devent.prevent()

Attempts:

3 left

💡 Hint

Common Mistakes

Using event.prevent() which does not exist.

Using event.stopPropagation() which stops event bubbling but not default behavior.

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

4fill in blank

hard

Fill both blanks to create a controlled input element with value and change handler.

React

<input type="text" value=[1] onChange=[2] />

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

AinputValue

BhandleChange

CsetInputValue

DinputHandler

Attempts:

3 left

💡 Hint

Common Mistakes

Using the update function as the value attribute.

Not providing an onChange handler for a controlled input.

A controlled input uses the state variable as its value and a handler function for onChange to update the state.

5fill in blank

hard

Fill all three blanks to complete a form component with state, change handler, and submit handler.

React

function Form() {
  const [inputValue, [1]] = useState('');

  function handleChange(event) {
    [2](event.target.value);
  }

  function handleSubmit(event) {
    [3];
    alert('Submitted: ' + inputValue);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={inputValue} onChange={handleChange} aria-label="Input field" />
      <button type="submit">Submit</button>
    </form>
  );
}

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

AsetInputValue

Cevent.preventDefault()

DinputValue

Attempts:

3 left

💡 Hint

Common Mistakes

Using the state variable instead of the update function to set state.

Forgetting to prevent default form submission behavior.

The state update function is used to update the input value. The submit handler calls event.preventDefault() to stop page reload.