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.

Practice

1. What is the main purpose of using useState in React form handling?

easy

A. To automatically validate form inputs

B. To style the form elements dynamically

C. To send form data directly to the server

D. To store and update the current value of form inputs

Solution

1. Step 1: Understand useState role in React

   useState is used to create a state variable that holds data and can be updated.

2. Step 2: Connect useState to form inputs

   In form handling, useState stores the current input value and updates it on user typing.

3. Final Answer:

   To store and update the current value of form inputs -> Option D

4. Quick Check:

   useState manages input values = A [OK]

Hint: useState holds input values and updates on change [OK]

Common Mistakes:

• Thinking useState styles elements
• Assuming useState sends data to server
• Confusing useState with validation logic

2. Which of the following is the correct way to update state on input change in React?

easy

A. onChange={(e) => setValue(e.target.value)}

B. onChange={() => setValue(e.value)}

C. onChange={(e) => setValue(e.target)}

D. onChange={(e) => setValue(e.currentTarget)}

Solution

1. Step 1: Identify correct event target usage

   The input value is accessed via e.target.value in event handlers.

2. Step 2: Confirm correct syntax for setState call

   Using setValue(e.target.value) updates state with the input's current value.

3. Final Answer:

   onChange={(e) => setValue(e.target.value)} -> Option A

4. Quick Check:

   Use e.target.value to get input value [OK]

Hint: Use e.target.value inside onChange to update state [OK]

Common Mistakes:

• Using e.value instead of e.target.value
• Passing e.target or e.currentTarget directly
• Omitting the event parameter e

3. What will be the output when the following React component is rendered and the user types 'Hi' in the input?

function GreetingForm() {
  const [name, setName] = React.useState('');
  return (
    <form>
      <input value={name} onChange={e => setName(e.target.value)} />
      <p>Hello, {name}!</p>
    </form>
  );
}

medium

A. The page reloads on typing

B. The paragraph shows 'Hello, Hi!' as user types 'Hi'

C. The paragraph remains empty regardless of input

D. The input clears automatically after typing

Solution

1. Step 1: Understand controlled input behavior

   The input value is controlled by state variable 'name' which updates on change.

2. Step 2: Observe paragraph rendering with state

   The paragraph displays 'Hello, {name}!' so it updates live as 'name' changes.

3. Final Answer:

   The paragraph shows 'Hello, Hi!' as user types 'Hi' -> Option B

4. Quick Check:

   Controlled input updates state and display = D [OK]

Hint: Controlled inputs update state and display live [OK]

Common Mistakes:

• Expecting input to clear automatically
• Thinking paragraph won't update
• Assuming page reloads on input change

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

function handleSubmit(e) {
  alert('Submitted');
}

What is missing to prevent the page from reloading on submit?

medium

A. Call e.preventDefault() inside handleSubmit

B. Use return false at the end of handleSubmit

C. Wrap alert in a setTimeout function

D. No error, the code works fine

Solution

1. Step 1: Understand default form submit behavior

   By default, form submission reloads the page unless prevented.

2. Step 2: Prevent default reload in React

   Calling e.preventDefault() inside the submit handler stops the reload.

3. Final Answer:

   Call e.preventDefault() inside handleSubmit -> Option A

4. Quick Check:

   Use e.preventDefault() to stop reload [OK]

Hint: Always call e.preventDefault() in submit handlers [OK]

Common Mistakes:

• Forgetting to pass event parameter e
• Using return false instead of preventDefault
• Assuming alert stops reload

5. You want to handle multiple input fields in one React form using a single state object. Which code snippet correctly updates the state for the changed input field?

const [formData, setFormData] = React.useState({ email: '', password: '' });

function handleChange(e) {
  // What goes here?
}

hard

A. setFormData({ e.target.name: e.target.value });

B. setFormData({ formData[e.target.name]: e.target.value });

C. setFormData({ ...formData, [e.target.name]: e.target.value });

D. setFormData({ [e.target.value]: e.target.name });

Solution

1. Step 1: Understand updating nested state objects

   To update one field in an object state, copy existing fields with spread operator.

2. Step 2: Use computed property name for dynamic key

   Use [e.target.name] to dynamically update the correct field with new value.

3. Final Answer:

   setFormData({ ...formData, [e.target.name]: e.target.value }); -> Option C

4. Quick Check:

   Spread old state + dynamic key update = B [OK]

Hint: Use spread and [e.target.name] to update form object state [OK]

Common Mistakes:

• Overwriting entire state without spreading
• Using invalid object key syntax
• Swapping name and value in update