React Forms and Events

Question 1

What makes a form input 'controlled' in React?

Accepted Answer

Its value is managed by React state

Answer

A controlled input's value is bound to React state, making React the single source of truth for the input's value.

Question 2

How do you prevent a form's default submission behavior in React?

Accepted Answer

Call `event.preventDefault()` in the onSubmit handler

Answer

Calling event.preventDefault() inside the onSubmit handler stops the browser from performing its default form submission and page reload.

Question 3

For a checkbox input, which property gives you the boolean checked state in an onChange handler?

Accepted Answer

event.target.checked

Answer

event.target.checked returns the boolean true/false state of a checkbox, while event.target.value returns the checkbox's value attribute string.

Question 4

What is the recommended pattern for handling multiple controlled inputs with a single onChange handler?

Accepted Answer

Use event.target.name to identify the input and update the corresponding state key

Answer

Using event.target.name allows a single onChange handler to update the correct key in a state object, reducing code duplication.

Question 5

What is an 'uncontrolled' component in React?

Accepted Answer

A component where the DOM manages its own form data internally

Answer

In uncontrolled components, the DOM itself maintains the form data, and you access it via refs rather than React state.

React Practice Test