Custom Hooks in React
15 questions · 12 min · Medium
Forms & Controlled Components in React
Test your knowledge of forms and controlled components in React, including form elements, state management, event handling, controlled inputs, form submission, validation, and select and checkbox controls.
- 15
- Questions
- 12 min
- Time limit
- Medium
- Difficulty
No sign-up needed · Last updated:
Score: 0 00:00
Save your score
Create a free account to keep your scores and track your progress. It is optional.
Questions to review
Related quizzes
React Component Lifecycle & useEffect Quiz – 20 Questions with Answers
20 questions · 15 min · Medium
Context API in React
15 questions · 12 min · Medium
Conditional Rendering in React
15 questions · 12 min · Medium
Components & Props in React Quiz – 15 Questions with Answers
15 questions · 12 min · Medium
Lists and Keys in ReactJS Quiz
15 questions · 12 min · Medium
All 15 questions and answers Spoilers: this shows the questions and answers. Try the quiz first! Open
-
1. What is a controlled component in React?
- A. A form element whose value is controlled by React state
- B. A component that cannot receive props
- C. A component that only renders static HTML
- D. A component controlled only by CSS
Show answer
A. A form element whose value is controlled by React state
In a controlled component, React state is the source of truth for the value of a form element.
-
2. Which React Hook is commonly used to manage the value of a controlled input?
- A. useState
- B. useEffect
- C. useMemo
- D. useRef
Show answer
A. useState
useState is commonly used to store and update the current value of a controlled form input.
-
3. Which prop is commonly used to control the value of a text input?
- A. value
- B. text
- C. inputValue
- D. state
Show answer
A. value
The value prop connects the input's displayed value to React state.
-
4. Which event is commonly used to update state when a user types into a controlled input?
- A. onChange
- B. onInputChange
- C. onType
- D. onUpdate
Show answer
A. onChange
The onChange event handler can read the new input value and update the corresponding React state.
-
5. Which property is commonly used to read the current value of a text input from a React event?
- A. event.target.value
- B. event.input.value
- C. event.value.target
- D. event.current.input
Show answer
A. event.target.value
For a text input, event.target.value provides the current value of the input element.
-
6. Which event is commonly used to handle form submission in React?
- A. onSubmit
- B. onSend
- C. onForm
- D. onSubmitForm
Show answer
A. onSubmit
The onSubmit prop can be placed on a form element to handle its submission.
-
7. Which method is commonly called to prevent a browser form from performing its default submission behavior?
- A. event.preventDefault()
- B. event.stopSubmit()
- C. event.preventForm()
- D. event.cancelSubmit()
Show answer
A. event.preventDefault()
Calling event.preventDefault() prevents the browser's default action, which is commonly used to handle form submission entirely within React.
-
8. Which JSX example correctly creates a controlled input?
- A. <input value={name} onChange={handleChange} />
- B. <input state={name} onType={handleChange} />
- C. <input controlled={name} onInput={handleChange} />
- D. <input data={name} onChangeState={handleChange} />
Show answer
A. <input value={name} onChange={handleChange} />
A controlled input typically receives its value from state through value and updates that state through an onChange handler.
-
9. What happens when a controlled input's value is set to React state but the onChange handler does not update that state?
- A. The input can become effectively read-only
- B. React automatically updates the state
- C. The input is automatically converted to an uncontrolled input
- D. The browser removes the input
Show answer
A. The input can become effectively read-only
If the value is controlled by state and that state is never updated, the displayed value cannot change through normal user input.
-
10. How is a checkbox commonly controlled in React?
- A. Using the checked prop and onChange
- B. Using value only
- C. Using selected only
- D. Using checkboxState only
Show answer
A. Using the checked prop and onChange
Checkboxes are commonly controlled with a boolean state connected to the checked prop and updated through onChange.
-
11. Which property is commonly used to determine whether a checkbox is selected?
- A. event.target.checked
- B. event.target.selected
- C. event.target.valueChecked
- D. event.checkbox.active
Show answer
A. event.target.checked
For checkbox inputs, event.target.checked provides a boolean indicating whether the checkbox is currently checked.
-
12. How can a select element be controlled in React?
- A. By using the value prop and onChange
- B. By using only the selected attribute
- C. By using checked and onClick
- D. By using optionValue only
Show answer
A. By using the value prop and onChange
A controlled select element uses value to specify the selected option and onChange to update the state.
-
13. What is one benefit of using controlled components for forms?
- A. React has direct control over the form data
- B. They eliminate the need for event handlers
- C. They prevent all validation errors automatically
- D. They require no state management
Show answer
A. React has direct control over the form data
Controlled components keep form values in React state, making the current form data available to the component for validation and other logic.
-
14. What is an uncontrolled component in React forms?
- A. A form element whose current value is primarily managed by the DOM
- B. A component that cannot be rendered
- C. A component without any JSX
- D. A component that cannot receive user input
Show answer
A. A form element whose current value is primarily managed by the DOM
In an uncontrolled component, the DOM maintains the form element's current value, and React can access it using mechanisms such as refs.
-
15. Which attribute can provide an initial value for an uncontrolled text input?
- A. defaultValue
- B. initialValue
- C. startValue
- D. initial
Show answer
A. defaultValue
The defaultValue prop specifies the initial value of an uncontrolled input without making React state its ongoing source of truth.