Back to Subject

Unit 4: Working with Forms - Practice Quiz

INT252 — Web App Development With Reactjs 50 Questions
0 Correct 0 Wrong 50 Left
0/50

1 Which HTML element is primarily used to collect user input in a React application?

A. <input>
B. <section>
C. <form>
D. <data>

2 In React, what is the standard event handler used to listen for changes in an input field?

A. onChange
B. onModify
C. onInput
D. onUpdate

3 What defines a 'Controlled Component' in React?

A. A component where the DOM handles the form data
B. A component where React state acts as the single source of truth
C. A component that controls other child components
D. A component accessed via refs

4 Which attribute must be set on an input element to make it a Controlled Component?

A. value
B. defaultValue
C. ref
D. name

5 If 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 allows typing but does not update state
C. The input becomes read-only
D. The input works normally

6 How do you access the value entered by the user in an onChange event handler?

A. event.input.value
B. event.value
C. event.target.value
D. event.data

7 What 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

8 Which React Hook is commonly used to access the DOM node in an uncontrolled component?

A. useRef
B. useContext
C. useState
D. useEffect

9 Which attribute is used to set the initial value of an uncontrolled input component?

A. defaultValue
B. startValue
C. initValue
D. value

10 Which method is called to prevent the default page reload behavior during form submission?

A. event.preventDefault()
B. event.halt()
C. event.stopImmediatePropagation()
D. event.stopPropagation()

11 Where should the onSubmit event handler be attached?

A. The <input> element
B. The <button> element inside the form
C. The <form> element
D. The <div> wrapping the form

12 How does React handle the <textarea> element differently than HTML?

A. It requires a closing tag in HTML but not in React
B. It uses innerText instead of value
C. It uses a value attribute instead of defining text as children
D. It cannot be controlled in React

13 In a controlled <select> component, where is the selected value defined?

A. It is automatically detected
B. On the <option> element using the selected attribute
C. On the <form> element
D. On the <select> element using the value attribute

14 Which syntax is useful for handling multiple inputs with a single onChange handler?

A. Multiple refs
B. Switch statements only
C. Computed property names: [e.target.name]
D. Nested if-else statements

15 When using a checkbox input in React, which property of event.target should be used to get the value?

A. enabled
B. checked
C. value
D. selected

16 Which input type is always an uncontrolled component in React?

A. checkbox
B. file
C. password
D. text

17 What is the purpose of the htmlFor attribute in React?

A. To link a form to a database
B. To specify the form method
C. To replace the HTML for attribute on labels
D. To style the form

18 Ideally, where should validation logic reside in a Controlled Component approach?

A. Inside the render method
B. Inside the event handlers (onChange/onSubmit) updating the state
C. In an external CSS file
D. Inside the DOM

19 How can you conditionally display an error message only if an error exists?

A. {error && <p>{error}</p>}
B. <p if={error}>{error}</p>
C. {error || <p>{error}</p>}
D. display: error

20 What represents the state of a form element that has been clicked on or focused and then blurred?

A. Dirty
B. Pressed
C. Touched
D. Clean

21 Which event is best used to validate a field specifically when the user leaves that field?

A. onBlur
B. onFocus
C. onClick
D. onMouseEnter

22 Why might you choose an uncontrolled component over a controlled one?

A. To make the code more 'React-like'
B. To use Redux state
C. To ensure strict validation
D. For better performance with extremely large forms

23 How do you handle a select element with the multiple attribute in React?

A. Pass an array to the value attribute
B. Use a comma-separated string
C. It is not supported
D. Use multiple value attributes

24 What is the correct way to reset a Controlled form after submission?

A. Delete the input elements
B. Reload the page
C. Update the state variables to their initial empty values
D. Call form.reset()

25 If you need to validate an email address, which JavaScript feature is commonly used inside the validation function?

A. Math.random()
B. Array.map()
C. JSON.parse()
D. Regular Expressions (Regex)

26 What happens if you change a controlled input from undefined value to a defined value during the component lifecycle?

A. Nothing happens
B. React logs a warning about switching from uncontrolled to controlled
C. The input becomes disabled
D. The component unmounts

27 In a controlled component, the source of truth is:

A. The React Component State
B. The Server
C. The HTML DOM
D. The Browser's Cache

28 To disable a submit button when a form is invalid, which attribute should be used?

A. hidden
B. disabled
C. stopped
D. invalid

29 Which of the following is NOT a valid type for an <input> element?

A. dropdown
B. text
C. email
D. number

30 When 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

31 What is a common library used in React for managing complex forms and validation?

A. Formik
B. React Router
C. Redux
D. Axios

32 In a radio button group, how does React know which buttons belong together?

A. They share the same name attribute
B. They are in the same div
C. They share the same value
D. They share the same id

33 What is the standard way to prevent a user from typing in an input field conditionally?

A. Use event.stop()
B. Remove the onChange handler
C. Use CSS display: none
D. Use the readOnly or disabled attribute

34 If a form validation function is asynchronous (e.g., checking username availability), where is the best place to trigger it?

A. In the index.html file
B. In the onChange handler or useEffect
C. In the CSS
D. Inside the render method

35 When using the onChange handler for a text input, what data type is event.target.value typically?

A. Object
B. String
C. Number
D. Boolean

36 What does the aria-label attribute do in a form?

A. It sets the input value
B. It validates the form
C. It provides a label for screen readers for accessibility
D. It changes the font style

37 Which approach is generally recommended by the React team for most forms?

A. Controlled Components
B. Direct DOM manipulation
C. Using jQuery
D. Uncontrolled Components

38 How can you optimize a form that lags due to validation running on every keystroke?

A. Use forceUpdate
B. Switch to Class components
C. Remove validation
D. Use Debouncing on the onChange handler

39 What is the equivalent of the HTML autofocus attribute in React?

A. focus=true
B. has-focus
C. It is not supported
D. autoFocus (camelCase)

40 If you have a form with 20 inputs, what is the downside of using separate useState hooks for each?

A. It is slower to write
B. React limits hooks to 10
C. It causes memory leaks
D. Code becomes verbose and harder to manage

41 What attribute allows an input to accept multiple files?

A. collection
B. array
C. files
D. multiple

42 In an uncontrolled form, how can you reset the form fields natively?

A. event.target.reset()
B. This is not possible
C. ref.current.reset()
D. window.reload()

43 Which React concept allows passing a ref from a parent to a child's input element?

A. Higher Order Components
B. Context API
C. Ref forwarding
D. Prop drilling

44 What is the primary role of a 'Submit Handler'?

A. To process data (e.g., send to API) and manage UI state
B. To styling the button
C. To clear the browser cache
D. To create new DOM elements

45 When validating, what does a 'Required' check ensure?

A. The input is a number
B. The input field is not empty
C. The input is unique
D. The input matches a regex

46 Can a div element typically fire an onChange event?

A. No, only form input elements fire onChange
B. Yes, if it has an ID
C. Yes, always
D. Yes, if contentEditable is true

47 How do you capture the file object from a file input onChange event?

A. event.target.files[0]
B. event.file
C. event.target.value
D. event.data.files

48 Which of the following is true regarding validation feedback?

A. It should be immediate and clear to the user
B. It is not necessary
C. It should only happen after the page reloads
D. It should be hidden in the console

49 What is the purpose of the placeholder attribute?

A. To validate the input
B. To set the default value
C. To provide a hint to the user about what to type
D. To name the input

50 If a controlled input's state is set to null, what happens?

A. It clears the input
B. It throws an error
C. It becomes uncontrolled
D. It displays the text 'null'
Previous MCQ
Unit 3
Next MCQ
Unit 5