Handling input fields in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a controlled input field that updates state on change.

React

import React, { useState } from 'react';

export default function InputExample() {
  const [value, setValue] = useState('');

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

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

A(e) => setValue(e.target.value)

B(e) => console.log(e.target.value)

C() => setValue('')

D(e) => e.preventDefault()

Attempts:

3 left

💡 Hint

Common Mistakes

Using a handler that only logs the value without updating state.

Not using the event parameter to get the input value.

The onChange handler updates the state with the current input value, making the input controlled.

2fill in blank

medium

Complete the code to display the input value below the input field.

React

import React, { useState } from 'react';

export default function ShowInput() {
  const [text, setText] = useState('');

  return (
    <>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <p>[1]</p>
    </>
  );
}

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

AsetText

Be.target.value

Ctext

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to use e.target.value outside the event handler.

Using the setter function setText instead of the value.

The paragraph should display the current state variable text which holds the input's value.

3fill in blank

hard

Fix the error in the code to properly update the input state on change.

React

import React, { useState } from 'react';

export default function FixInput() {
  const [input, setInput] = useState('');

  function handleChange(e) {
    setInput(e.target.value);
  }

  return <input value={input} onChange=[1] />;
}

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

AhandleChange

B(e) => setInput = e.target.value

C() => {}

DsetInput(e.target.value)

Attempts:

3 left

💡 Hint

Common Mistakes

Assigning to the setter function instead of calling it.

Passing a call instead of a function reference to onChange.

The handleChange function is passed as the onChange handler. The error is fixed by using setInput(e.target.value) inside the function instead of assignment.

4fill in blank

hard

Fill both blanks to create a controlled textarea with placeholder and update state on change.

React

import React, { useState } from 'react';

export default function TextAreaExample() {
  const [content, setContent] = useState('');

  return (
    <textarea placeholder=[1] value={content} onChange=[2] />
  );
}

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

A"Enter your message"

B(e) => setContent(e.target.value)

C"Type here"

D(e) => console.log(e.target.value)

Attempts:

3 left

💡 Hint

Common Mistakes

Using a function instead of a string for placeholder.

Logging the value instead of updating state in onChange.

The placeholder attribute shows a hint inside the textarea. The onChange updates the state with the current text.

5fill in blank

hard

Fill all three blanks to create a form with controlled inputs for name and age, and handle submit.

React

import React, { useState } from 'react';

export default function FormExample() {
  const [name, setName] = useState('');
  const [age, setAge] = useState('');

  function handleSubmit(e) {
    e.preventDefault();
    alert(`Name: ${name}, Age: ${age}`);
  }

  return (
    <form onSubmit=[1]>
      <input type="text" value={name} onChange=[2] placeholder="Name" />
      <input type="number" value={age} onChange=[3] placeholder="Age" />
      <button type="submit">Submit</button>
    </form>
  );
}

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

AhandleSubmit

B(e) => setName(e.target.value)

C(e) => setAge(e.target.value)

D() => alert('Submitted')

Attempts:

3 left

💡 Hint

Common Mistakes

Not preventing default form submission behavior.

Using the wrong setter function for inputs.

Passing a call instead of a function reference to event handlers.

The form's onSubmit calls handleSubmit to prevent reload and show alert. The inputs update their respective states on change.

Practice

1. What is the main purpose of using useState when handling input fields in React?

easy

A. To store and update the current value of the input field

B. To style the input field dynamically

C. To fetch data from an API when input changes

D. To prevent the input field from rendering

Solution

1. Step 1: Understand the role of useState

   useState is a React hook used to create state variables that can hold values and update them.

2. Step 2: Connect useState to input fields

   When handling input fields, useState stores the current input value and updates it as the user types.

3. Final Answer:

   To store and update the current value of the input field -> Option A

4. Quick Check:

   useState manages input value = A [OK]

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

Common Mistakes:

• Thinking useState styles the input
• Confusing useState with fetching data
• Believing useState stops rendering

2. Which of the following is the correct way to update state when handling an input field change in React?

easy

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

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

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

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

Solution

1. Step 1: Identify the event object usage

   The event object e contains the input element in e.target, and its value is in e.target.value.

2. Step 2: Check the correct syntax for updating state

   The state update function should be called with e.target.value inside the arrow function.

3. Final Answer:

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

4. Quick Check:

   Use e.target.value to update state [OK]

Hint: Use e.target.value inside onChange handler [OK]

Common Mistakes:

• Omitting event parameter e
• Using e.value instead of e.target.value
• Passing e.target instead of its value

3. What will be displayed when the following React component is rendered and the user types 'hello' in the input field?

import React, { useState } from 'react';

function InputExample() {
  const [text, setText] = useState('');
  return (
    <div>
      <input value={text} onChange={e => setText(e.target.value)} />
      <p>You typed: {text}</p>
    </div>
  );
}

medium

A. An input box showing 'hello' but no paragraph

B. An input box with no text and an empty paragraph

C. An input box and a paragraph showing 'You typed: hello'

D. A syntax error preventing rendering

Solution

1. Step 1: Understand controlled input behavior

   The input's value is controlled by the state variable text. Typing updates text via setText.

2. Step 2: Check rendered output

   The paragraph displays the current text value, so typing 'hello' shows 'You typed: hello'.

3. Final Answer:

   An input box and a paragraph showing 'You typed: hello' -> Option C

4. Quick Check:

   Controlled input shows typed text [OK]

Hint: Controlled input updates state and shows typed text [OK]

Common Mistakes:

• Thinking input is uncontrolled and won't update
• Expecting paragraph to be empty
• Assuming syntax error without cause

4. Identify the error in this React input handler code:

function MyInput() {
  const [value, setValue] = useState('');
  function handleChange() {
    setValue(e.target.value);
  }
  return <input value={value} onChange={handleChange} />;
}

medium

A. The event parameter e is missing in handleChange

B. The value state is not initialized

C. The onChange should be onInput

D. The input should not have a value prop

Solution

1. Step 1: Check the handleChange function signature

   handleChange uses e.target.value but does not receive e as a parameter, causing a ReferenceError.

2. Step 2: Correct the function to accept event

   Adding e as a parameter fixes the error: function handleChange(e) { setValue(e.target.value); }.

3. Final Answer:

   The event parameter e is missing in handleChange -> Option A

4. Quick Check:

   Event parameter needed in handler [OK]

Hint: Always pass event parameter to onChange handler [OK]

Common Mistakes:

• Forgetting to add event parameter e
• Using wrong event like onInput
• Removing value prop from controlled input

5. You want to create a form with two input fields, firstName and lastName, and update their values independently using a single useState object. Which code snippet correctly updates the state when either input changes?

const [form, setForm] = useState({ firstName: '', lastName: '' });

// Which onChange handler is correct?

A) onChange={e => setForm({ [e.target.name]: e.target.value })}

B) onChange={e => setForm(prev => ({ ...prev, [e.target.name]: e.target.value }))}

C) onChange={e => setForm({ form, [e.target.name]: e.target.value })}

D) onChange={e => setForm({ form: { [e.target.name]: e.target.value } })}

hard

A. Updates state but overwrites other fields, losing data

B. Wraps updated field inside another object, breaking state

C. Incorrectly nests state causing wrong structure

D. Correctly merges new field value with existing state

Solution

1. Step 1: Understand state update with objects

   When updating part of an object state, you must merge the new field with existing fields to avoid losing data.

2. Step 2: Analyze each option

   Updates state but overwrites other fields, losing data replaces the entire state with only one field, losing the other. Correctly merges new field value with existing state uses a function to merge previous state with the new field correctly. Options C and D incorrectly nest or wrap the state, breaking the structure.

3. Final Answer:

   Correctly merges new field value with existing state -> Option D

4. Quick Check:

   Use spread operator to merge state updates [OK]

Hint: Use spread ...prev to merge state updates in objects [OK]

Common Mistakes:

• Overwriting entire state object losing other fields
• Nesting state inside another object accidentally
• Not using functional update form for safety