React Forms and Events 2 — Questions and Answers
Question 1: Which React hook is typically used to access the value of an uncontrolled form input?
- useState
- useEffect
- useCallback
- useRef (Correct answer)
Correct answer: useRef
useRef creates a ref object that can be attached to a DOM element, allowing direct access to the uncontrolled input's current value via ref.current.value.
Question 2: What are React SyntheticEvents?
- Events created manually using the Event constructor
- Custom events defined by the developer with createEvent()
- Events that only fire in React production mode
- Cross-browser wrappers around native browser events (Correct answer)
Correct answer: Cross-browser wrappers around native browser events
React's SyntheticEvent wraps native browser events to provide a consistent, cross-browser API so developers don't need to handle browser differences.
Question 3: How is a controlled `<textarea>` in React different from a standard HTML textarea?
- React textareas use `innerText` instead of `value`
- React textareas use `value` prop and onChange, not content between tags (Correct answer)
- React textareas require a `rows` prop to work correctly
- React textareas use `defaultText` instead of `defaultValue`
Correct answer: React textareas use `value` prop and onChange, not content between tags
In React, a controlled textarea uses the `value` prop bound to state and an onChange handler, unlike HTML where content goes between opening and closing tags.
Question 4: What is the correct way to control which option is selected in a React `<select>` element?
- Set the `selected` attribute on the desired `<option>` element
- Set `defaultSelected` on the `<select>` element
- Set the `value` prop on the `<select>` element and update via onChange (Correct answer)
- Use a ref to imperatively select an option
Correct answer: Set the `value` prop on the `<select>` element and update via onChange
React uses the `value` prop on the `<select>` element to control which option is selected, replacing the HTML approach of using `selected` on individual options.
Question 5: What does `event.stopPropagation()` do in a React event handler?
- Prevents the default browser action for the event
- Stops the event from bubbling up to parent elements (Correct answer)
- Removes the event listener after it fires once
- Cancels the current render cycle
Correct answer: Stops the event from bubbling up to parent elements
stopPropagation prevents the event from bubbling up through the DOM tree, so parent elements won't also receive and handle the event.
Question 6: What is the best practice for displaying form validation errors in React?
- Validate only on form submission using an alert()
- Use browser-native HTML5 validation attributes exclusively
- Store error messages in state and display them conditionally near the field (Correct answer)
- Avoid client-side validation and rely on server responses only
Correct answer: Store error messages in state and display them conditionally near the field
Storing error messages in state and rendering them conditionally near the relevant fields gives users immediate, contextual feedback while keeping validation logic in React.
Question 7: What is the purpose of the `onBlur` event in React form handling?
- To submit the form when a field loses focus
- To clear the input value when a user leaves the field
- To trigger validation or actions when a user leaves an input field (Correct answer)
- To focus the next input in the form automatically
Correct answer: To trigger validation or actions when a user leaves an input field
onBlur fires when an element loses focus, making it ideal for triggering field-level validation after the user has finished entering input.
React Forms and Events 2
Which React hook is typically used to access the value of an uncontrolled form input?