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.