1Which HTML element is primarily used to collect user input in a React application?
A.<section>
B.<form>
C.<data>
D.<input>
Correct Answer: <form>
Explanation:
While <input> elements capture specific data, the <form> element is the container used to group input elements and handle data submission.
Incorrect! Try again.
2In React, what is the standard event handler used to listen for changes in an input field?
A.onModify
B.onInput
C.onChange
D.onUpdate
Correct Answer: onChange
Explanation:
React uses the onChange event to track every keystroke or change in value of form elements.
Incorrect! Try again.
3What defines a 'Controlled Component' in React?
A.A component that controls other child components
B.A component where the DOM handles the form data
C.A component accessed via refs
D.A component where React state acts as the single source of truth
Correct Answer: A component where React state acts as the single source of truth
Explanation:
In a controlled component, the form data is handled by the React component's state, rather than the DOM maintaining its own state.
Incorrect! Try again.
4Which attribute must be set on an input element to make it a Controlled Component?
A.defaultValue
B.ref
C.value
D.name
Correct Answer: value
Explanation:
Setting the value attribute and binding it to a state variable makes the input controlled by React.
Incorrect! Try again.
5If you provide a value prop to an input without an onChange handler, what is the result?
A.React throws a compile error
B.The input becomes read-only
C.The input allows typing but does not update state
D.The input works normally
Correct Answer: The input becomes read-only
Explanation:
React renders the input with the specified value. Without an onChange handler to update that value, user input is ignored, effectively making it read-only.
Incorrect! Try again.
6How do you access the value entered by the user in an onChange event handler?
A.event.target.value
B.event.data
C.event.value
D.event.input.value
Correct Answer: event.target.value
Explanation:
The event object contains a target property representing the element, which has a value property holding the current input.
Incorrect! Try again.
7What is an 'Uncontrolled Component' in React?
A.A component that causes infinite loops
B.A component without any props
C.A component where form data is handled by the DOM itself
D.A component managed entirely by Redux
Correct Answer: A component where form data is handled by the DOM itself
Explanation:
Uncontrolled components act more like traditional HTML form elements where the DOM stores the state, and React accesses it via refs.
Incorrect! Try again.
8Which React Hook is commonly used to access the DOM node in an uncontrolled component?
A.useContext
B.useRef
C.useEffect
D.useState
Correct Answer: useRef
Explanation:
useRef is used to create a reference to the DOM element, allowing direct access to its current value.
Incorrect! Try again.
9Which attribute is used to set the initial value of an uncontrolled input component?
A.initValue
B.startValue
C.defaultValue
D.value
Correct Answer: defaultValue
Explanation:
In uncontrolled components, defaultValue sets the initial text, but allows the user to change it subsequently since React is not forcing the value.
Incorrect! Try again.
10Which method is called to prevent the default page reload behavior during form submission?
A.event.stopPropagation()
B.event.preventDefault()
C.event.stopImmediatePropagation()
D.event.halt()
Correct Answer: event.preventDefault()
Explanation:
Calling event.preventDefault() inside the submission handler prevents the browser's default behavior of refreshing the page.
Incorrect! Try again.
11Where should the onSubmit event handler be attached?
A.The <form> element
B.The <div> wrapping the form
C.The <button> element inside the form
D.The <input> element
Correct Answer: The <form> element
Explanation:
The onSubmit handler should be placed on the <form> tag to capture submission triggered by buttons or the Enter key.
Incorrect! Try again.
12How does React handle the <textarea> element differently than HTML?
A.It cannot be controlled in React
B.It uses innerText instead of value
C.It uses a value attribute instead of defining text as children
D.It requires a closing tag in HTML but not in React
Correct Answer: It uses a value attribute instead of defining text as children
Explanation:
In HTML, textarea content is between tags. In React, it behaves like an input element using the value attribute.
Incorrect! Try again.
13In a controlled <select> component, where is the selected value defined?
A.On the <form> element
B.It is automatically detected
C.On the <option> element using the selected attribute
D.On the <select> element using the value attribute
Correct Answer: On the <select> element using the value attribute
Explanation:
React standardizes select inputs by using a value attribute on the root <select> tag to determine the currently selected option.
Incorrect! Try again.
14Which syntax is useful for handling multiple inputs with a single onChange handler?
Using computed property names (e.g., [name]: value) allows a single handler to update the corresponding state variable dynamically based on the input's name attribute.
Incorrect! Try again.
15When using a checkbox input in React, which property of event.target should be used to get the value?
A.value
B.selected
C.checked
D.enabled
Correct Answer: checked
Explanation:
For input type='checkbox', the checked property (boolean) indicates whether the box is ticked, not value.
Incorrect! Try again.
16Which input type is always an uncontrolled component in React?
A.checkbox
B.text
C.password
D.file
Correct Answer: file
Explanation:
File inputs are read-only because their value can only be set by a user interaction, not programmatically by JavaScript, making them uncontrolled.
Incorrect! Try again.
17What is the purpose of the htmlFor attribute in React?
A.To specify the form method
B.To style the form
C.To replace the HTML for attribute on labels
D.To link a form to a database
Correct Answer: To replace the HTML for attribute on labels
Explanation:
Since for is a reserved keyword in JavaScript, React uses htmlFor to associate a <label> with an input ID.
Incorrect! Try again.
18Ideally, where should validation logic reside in a Controlled Component approach?
A.Inside the DOM
B.In an external CSS file
C.Inside the render method
D.Inside the event handlers (onChange/onSubmit) updating the state
Correct Answer: Inside the event handlers (onChange/onSubmit) updating the state
Explanation:
Validation is usually performed when the state updates (onChange) or when the form is submitted, and errors are stored in state.
Incorrect! Try again.
19How can you conditionally display an error message only if an error exists?
A.{error && <p>{error}</p>}
B.<p if={error}>{error}</p>
C.display: error
D.{error || <p>{error}</p>}
Correct Answer: {error && <p>{error}</p>}
Explanation:
This is a standard JavaScript short-circuit evaluation pattern used in JSX to render the paragraph only if error is truthy.
Incorrect! Try again.
20What represents the state of a form element that has been clicked on or focused and then blurred?
A.Dirty
B.Clean
C.Touched
D.Pressed
Correct Answer: Touched
Explanation:
In form libraries and manual validation, 'touched' usually indicates the user has interacted with the field (often triggered by onBlur), enabling validation messages to appear only after interaction.
Incorrect! Try again.
21Which event is best used to validate a field specifically when the user leaves that field?
A.onBlur
B.onFocus
C.onClick
D.onMouseEnter
Correct Answer: onBlur
Explanation:
onBlur fires when an element loses focus, making it the ideal time to validate a field the user has finished editing.
Incorrect! Try again.
22Why might you choose an uncontrolled component over a controlled one?
A.For better performance with extremely large forms
B.To use Redux state
C.To ensure strict validation
D.To make the code more 'React-like'
Correct Answer: For better performance with extremely large forms
Explanation:
Uncontrolled components avoid re-rendering the component on every keystroke, which can be beneficial for performance in very large forms or when integrating with non-React code.
Incorrect! Try again.
23How do you handle a select element with the multiple attribute in React?
A.Use multiple value attributes
B.Use a comma-separated string
C.Pass an array to the value attribute
D.It is not supported
Correct Answer: Pass an array to the value attribute
Explanation:
For a multi-select box, the value attribute accepts an array of strings corresponding to the selected options.
Incorrect! Try again.
24What is the correct way to reset a Controlled form after submission?
A.Update the state variables to their initial empty values
B.Delete the input elements
C.Reload the page
D.Call form.reset()
Correct Answer: Update the state variables to their initial empty values
Explanation:
Since the inputs are bound to state, you must reset the state variables to clear the form fields.
Incorrect! Try again.
25If you need to validate an email address, which JavaScript feature is commonly used inside the validation function?
A.Regular Expressions (Regex)
B.Math.random()
C.JSON.parse()
D.Array.map()
Correct Answer: Regular Expressions (Regex)
Explanation:
Regex patterns are the standard way to check if a string matches the format of an email address.
Incorrect! Try again.
26What happens if you change a controlled input from undefined value to a defined value during the component lifecycle?
A.Nothing happens
B.The component unmounts
C.React logs a warning about switching from uncontrolled to controlled
D.The input becomes disabled
Correct Answer: React logs a warning about switching from uncontrolled to controlled
Explanation:
If value is undefined, React treats it as uncontrolled. If it later gets a value, it becomes controlled. React warns against this dynamic switch.
Incorrect! Try again.
27In a controlled component, the source of truth is:
A.The Browser's Cache
B.The React Component State
C.The HTML DOM
D.The Server
Correct Answer: The React Component State
Explanation:
Controlled components rely on React state to dictate exactly what is displayed in the input.
Incorrect! Try again.
28To disable a submit button when a form is invalid, which attribute should be used?
A.hidden
B.stopped
C.invalid
D.disabled
Correct Answer: disabled
Explanation:
The disabled attribute prevents user interaction with the button. It can be set dynamically based on the validity state of the form.
Incorrect! Try again.
29Which of the following is NOT a valid type for an <input> element?
A.dropdown
B.text
C.number
D.email
Correct Answer: dropdown
Explanation:
dropdown is not an input type. The correct HTML element for a dropdown is <select>.
Incorrect! Try again.
30When using useRef to access a form value, how do you access the actual DOM node?
A.ref.dom
B.ref.value
C.ref.node
D.ref.current
Correct Answer: ref.current
Explanation:
The useRef hook returns an object with a current property that holds the actual DOM node once mounted.
Incorrect! Try again.
31What is a common library used in React for managing complex forms and validation?
A.Redux
B.Axios
C.React Router
D.Formik
Correct Answer: Formik
Explanation:
Formik (and React Hook Form) are popular libraries specifically designed to handle form state, validation, and submission in React.
Incorrect! Try again.
32In a radio button group, how does React know which buttons belong together?
A.They share the same value
B.They share the same id
C.They share the same name attribute
D.They are in the same div
Correct Answer: They share the same name attribute
Explanation:
Just like in HTML, radio buttons with the same name attribute form a group where only one can be selected at a time.
Incorrect! Try again.
33What is the standard way to prevent a user from typing in an input field conditionally?
A.Use CSS display: none
B.Use event.stop()
C.Remove the onChange handler
D.Use the readOnly or disabled attribute
Correct Answer: Use the readOnly or disabled attribute
Explanation:
The readOnly or disabled props are the semantic and functional ways to prevent user input in React forms.
Incorrect! Try again.
34If a form validation function is asynchronous (e.g., checking username availability), where is the best place to trigger it?
A.Inside the render method
B.In the CSS
C.In the index.html file
D.In the onChange handler or useEffect
Correct Answer: In the onChange handler or useEffect
Explanation:
Asynchronous operations should occur in side-effect handlers like event handlers or useEffect, not during the render phase.
Incorrect! Try again.
35When using the onChange handler for a text input, what data type is event.target.value typically?
A.String
B.Number
C.Object
D.Boolean
Correct Answer: String
Explanation:
Even for type='number', the DOM value property is always a string. It must be parsed if a number is required.
Incorrect! Try again.
36What does the aria-label attribute do in a form?
A.It provides a label for screen readers for accessibility
B.It changes the font style
C.It sets the input value
D.It validates the form
Correct Answer: It provides a label for screen readers for accessibility
Explanation:
Accessibility is crucial in forms. aria-label provides a text description for elements that might not have a visible label.
Incorrect! Try again.
37Which approach is generally recommended by the React team for most forms?
A.Direct DOM manipulation
B.Uncontrolled Components
C.Using jQuery
D.Controlled Components
Correct Answer: Controlled Components
Explanation:
Controlled components are generally recommended because they support instant validation, conditional disabling, and enforcing input formats.
Incorrect! Try again.
38How can you optimize a form that lags due to validation running on every keystroke?
A.Switch to Class components
B.Use Debouncing on the onChange handler
C.Use forceUpdate
D.Remove validation
Correct Answer: Use Debouncing on the onChange handler
Explanation:
Debouncing ensures the validation logic only runs after the user stops typing for a specified delay, improving performance.
Incorrect! Try again.
39What is the equivalent of the HTML autofocus attribute in React?
A.has-focus
B.focus=true
C.autoFocus (camelCase)
D.It is not supported
Correct Answer: autoFocus (camelCase)
Explanation:
React uses camelCase for attributes, so autofocus becomes autoFocus.
Incorrect! Try again.
40If you have a form with 20 inputs, what is the downside of using separate useState hooks for each?
A.React limits hooks to 10
B.It is slower to write
C.It causes memory leaks
D.Code becomes verbose and harder to manage
Correct Answer: Code becomes verbose and harder to manage
Explanation:
Managing 20 separate state variables and handlers is repetitive. Using a single object state with one generic handler is cleaner.
Incorrect! Try again.
41What attribute allows an input to accept multiple files?
A.multiple
B.files
C.collection
D.array
Correct Answer: multiple
Explanation:
The multiple attribute allows the user to select more than one file in a file input or multiple options in a select.
Incorrect! Try again.
42In an uncontrolled form, how can you reset the form fields natively?
A.ref.current.reset()
B.This is not possible
C.window.reload()
D.event.target.reset()
Correct Answer: event.target.reset()
Explanation:
If you are in the onSubmit handler, event.target refers to the form element, which has a native HTML reset() method.
Incorrect! Try again.
43Which React concept allows passing a ref from a parent to a child's input element?
A.Ref forwarding
B.Context API
C.Higher Order Components
D.Prop drilling
Correct Answer: Ref forwarding
Explanation:
React.forwardRef allows a component to take a ref attribute passed to it and forward it to a DOM element further down the tree.
Incorrect! Try again.
44What is the primary role of a 'Submit Handler'?
A.To styling the button
B.To process data (e.g., send to API) and manage UI state
C.To clear the browser cache
D.To create new DOM elements
Correct Answer: To process data (e.g., send to API) and manage UI state
Explanation:
The submit handler gathers the data, often validates it one last time, sends it to a server, and updates the UI (e.g., showing a success message).
Incorrect! Try again.
45When validating, what does a 'Required' check ensure?
A.The input is a number
B.The input is unique
C.The input field is not empty
D.The input matches a regex
Correct Answer: The input field is not empty
Explanation:
A 'Required' validation simply checks that the value is not null, undefined, or an empty string.
Incorrect! Try again.
46Can a div element typically fire an onChange event?
A.Yes, if it has an ID
B.Yes, always
C.No, only form input elements fire onChange
D.Yes, if contentEditable is true
Correct Answer: No, only form input elements fire onChange
Explanation:
Standard div elements do not accept input and thus do not fire onChange events unless specialized (like contentEditable, which is complex in React).
Incorrect! Try again.
47How do you capture the file object from a file input onChange event?
A.event.data.files
B.event.target.value
C.event.target.files[0]
D.event.file
Correct Answer: event.target.files[0]
Explanation:
File inputs store selected files in a files FileList array on the target object. The first file is at index 0.
Incorrect! Try again.
48Which of the following is true regarding validation feedback?
A.It should be immediate and clear to the user
B.It should only happen after the page reloads
C.It is not necessary
D.It should be hidden in the console
Correct Answer: It should be immediate and clear to the user
Explanation:
Good UX dictates that validation errors should be displayed clearly and typically near the field causing the error.
Incorrect! Try again.
49What is the purpose of the placeholder attribute?
A.To set the default value
B.To name the input
C.To provide a hint to the user about what to type
D.To validate the input
Correct Answer: To provide a hint to the user about what to type
Explanation:
The placeholder text is displayed in the input field before the user enters a value, acting as a hint.
Incorrect! Try again.
50If a controlled input's state is set to null, what happens?
A.It displays the text 'null'
B.It throws an error
C.It becomes uncontrolled
D.It clears the input
Correct Answer: It becomes uncontrolled
Explanation:
In React, passing null or undefined to the value prop tells React that the component is uncontrolled, potentially causing warnings if it was previously controlled.