Form handling in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the main way to handle form inputs in React?

Use controlled components where the form input's value is linked to React state, and changes update the state.

beginner

What React hook is commonly used to manage form input values?

The useState hook is used to store and update input values as the user types.

beginner

Why should you prevent the default form submission behavior in React?

To stop the browser from reloading the page, so you can handle the form data with JavaScript instead.

intermediate

How do you update multiple form fields in React efficiently?

Use a single state object for all fields and update the specific field using the input's name attribute and event target value.

intermediate

What is an uncontrolled component in React form handling?

A form input that manages its own state internally, accessed via refs instead of React state.

Which React hook is best for storing a form input's current value?

A useState

B useEffect

C useRef

D useContext

useState stores and updates values like form inputs as the user types.

What does calling event.preventDefault() in a form submit handler do?

A Clears the form inputs

B Sends the form data to the server

C Stops the page from reloading

D Disables the submit button

It prevents the browser's default reload on form submission.

In a controlled component, where is the input's value stored?

A In React state

B In the DOM only

C In a cookie

D In localStorage

Controlled inputs keep their value in React state for easy control.

How can you handle multiple form inputs with one state object?

A Use a global variable

B Create separate state for each input

C Use refs for each input

D Use input name attributes and update state by field name

Using input names lets you update the right field in one state object.

What is a key difference between controlled and uncontrolled components?

A Uncontrolled components can't submit forms

B Controlled components use React state; uncontrolled use refs

C Uncontrolled components require useState

D Controlled components don't update on input

Controlled inputs link to React state; uncontrolled inputs manage their own state.

Explain how to create a controlled form input in React and why it is useful.

Think about how React state and input value connect.

Describe the difference between controlled and uncontrolled form components in React.

Consider how input values are stored and accessed.