React Forms and Events 1 — Questions and Answers
Question 1: What makes a form input 'controlled' in React?
- It has a `name` attribute
- Its value is managed by React state (Correct answer)
- It uses the `ref` attribute
- It has an `autoFocus` prop
Correct answer: Its value is managed by React state
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?
- Set `type='button'` on the submit button
- Add a `noSubmit` attribute to the form
- Call `event.preventDefault()` in the onSubmit handler (Correct answer)
- Call `event.stopPropagation()` in the handler
Correct answer: Call `event.preventDefault()` in the onSubmit handler
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?
- event.target.value
- event.target.data
- event.target.state
- event.target.checked (Correct answer)
Correct answer: event.target.checked
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?
- Use event.target.id to identify the input and update state
- Use event.target.name to identify the input and update the corresponding state key (Correct answer)
- Create separate state variables and handlers for each input
- Use refs for each input and read them on submit
Correct answer: Use event.target.name to identify the input and update the corresponding state key
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?
- A component that lacks event handlers
- A component without lifecycle methods
- A component where the DOM manages its own form data internally (Correct answer)
- A component that uses Context instead of props
Correct answer: A component where the DOM manages its own form data internally
In uncontrolled components, the DOM itself maintains the form data, and you access it via refs rather than React state.
Question 6: What does the `defaultValue` prop do on a React input element?
- Sets placeholder text shown when the field is empty
- Sets the initial value without making the input controlled (Correct answer)
- Makes the input required for form submission
- Disables user editing of the input
Correct answer: Sets the initial value without making the input controlled
`defaultValue` sets the initial value for an uncontrolled input without binding it to React state, unlike `value` which creates a controlled component.
Question 7: Which React event fires when the value of an input, textarea, or select element changes?
- onInput
- onModify
- onChange (Correct answer)
- onUpdate
Correct answer: onChange
React's onChange event fires whenever the value of a form element changes, and behaves similarly to the native DOM oninput event.
React Forms and Events 1
What makes a form input 'controlled' in React?