🔹MCQs Of Class
12: Project 1 – Profile Card App
1. What is a "prop" in
React?
A)
A method to change state
B) A way to pass data from parent to child components
C) A way to create new components
D) A way to handle events
Answer: B
2. Which of the following is true
about props in React?
A)
Props can be modified inside the child component
B) Props are immutable inside the child component
C) Props cannot be passed from parent to child
D) Props and state are the same
Answer: B
3. How do you access props inside a
functional component?
A)
this.props
B) Using a second argument
C) As a parameter to the function
D) Using useState
Answer: C
4. What does the useState hook do?
A)
It creates a component
B) It manages state in functional components
C) It passes props to child components
D) It handles side effects
Answer: B
5. What happens when you call the
setter function returned by useState?
A)
It updates the component’s state and triggers a re-render
B) It deletes the component
C) It creates a new component
D) It passes data as props
Answer: A
6. How do you toggle a boolean state
called showDetails?
A)
setShowDetails(true)
B) setShowDetails(!showDetails)
C) showDetails = !showDetails
D) useState(!showDetails)
Answer: B
7. Which of the following correctly
passes a function as a prop?
A)
<Component onClick={handleClick()} />
B) <Component onClick={handleClick} />
C) <Component onClick="handleClick" />
D) <Component onClick={() => handleClick()} />
Answer: B and D (Both are valid, but B is
the most common)
8. What is the role of the key prop
when rendering a list?
A)
To style the component
B) To uniquely identify list items for efficient rendering
C) To pass props to child
D) To trigger state changes
Answer: B
9. How do you conditionally render a
component in JSX?
A)
Using a for loop
B) Using {condition && <Component />}
C) Using an if statement inside JSX
D) Using setState
Answer: B
10. Which of the following is a
controlled input?
A)
<input /> with no attributes
B) <input value={value} onChange={handleChange} />
C) <input defaultValue="text" />
D) <input type="button" />
Answer: B
11. What does the onClick event
handler do?
A)
Triggers a function when a component mounts
B) Triggers a function when an element is clicked
C) Triggers a function when input changes
D) Triggers a function when the component unmounts
Answer: B
12. Where is state stored in React?
A)
Globally across the app
B) In components that use useState or class state
C) Only in Redux
D) Only in props
Answer: B
13. Can state be directly mutated in
React?
A)
Yes
B) No
C) Only for primitive types
D) Only inside constructors
Answer: B
14. Which hook is used to add side
effects?
A)
useEffect
B) useState
C) useContext
D) useReducer
Answer: A
15. What does the map() method
return when used to render components?
A)
A single JSX element
B) An array of JSX elements
C) A string
D) An object
Answer: B
16. How do you pass default values
for props?
A)
Using defaultProps or default function parameters
B) Using useState
C) Using useEffect
D) Using a setter function
Answer: A
17. What is a common pattern to
toggle between two states in React?
A)
setState(!state)
B) setState(state + 1)
C) setState(true)
D) setState(state * 2)
Answer: A
18. Which of these is NOT a valid
React event?
A)
onClick
B) onChange
C) onHover
D) onSubmit
Answer: C
19. How can you pass multiple props
to a component?
A)
Using a single prop as an object
B) Passing each as separate attributes
C) Both A and B
D) Using a context only
Answer: C
20. What is a pure component?
A)
A component without props
B) A component that does not change its output for the same props and state
C) A component that uses only state
D) A component that is class-based
Answer: B
21. What is the main difference
between props and state?
A)
Props are mutable, state is immutable
B) Props are immutable, state is mutable
C) Props trigger re-render, state does not
D) Props can only be strings
Answer: B
22. Which statement correctly
initializes state using useState?
A)
const [state, setState] = useState()
B) const state = useState()
C) const state = setState()
D) const [state, setState] = useState(initialValue)
Answer: D
23. What happens if you forget the key
prop when rendering lists?
A)
React throws an error
B) React will still render but may have inefficient rendering or bugs
C) The app crashes
D) The components will not mount
Answer: B
24. How do you update the state
based on the previous state?
A)
setState(newState)
B) setState(prev => prev + 1)
C) setState(state + 1)
D) setState()
Answer: B
25. Which hook is used to initialize
state in a functional component?
A)
useEffect
B) useState
C) useRef
D) useCallback
Answer: B
26. Which is the correct way to bind
event handlers in functional components?
A)
Using .bind(this)
B) Defining inline arrow functions
C) Using class constructors
D) Using .call()
Answer: B
27. How can a child component update
the state of a parent component?
A)
By directly modifying parent state
B) By passing a function prop from parent to child and calling it in child
C) By using Redux only
D) Child cannot update parent state
Answer: B
28. What is the purpose of lifting
state up?
A)
To duplicate state across components
B) To share state among multiple components
C) To avoid passing props
D) To delete unused components
Answer: B
29. What is a controlled component
in React?
A)
A component whose state is controlled by Redux
B) A component where form data is handled by React state
C) A component with no props
D) A component that cannot update
Answer: B
30. What does JSX stand for?
A)
JavaScript XML
B) JavaScript XHTML
C) JavaScript External
D) JavaScript Execution
Answer: A
31. Which of the following is NOT
true about React?
A)
It uses a virtual DOM
B) It allows direct DOM manipulation
C) It uses components
D) It supports reusable UI elements
Answer: B
32. How do you import useState in
React?
A)
import React from 'react'
B) import { useState } from 'react'
C) import useState from 'react'
D) import React, { useState } from 'react'
Answer: D
33. Which of the following is a
valid event handler in React?
A)
onclick
B) onClick
C) OnClick
D) ONCLICK
Answer: B
34. How do you add inline styles in
React?
A)
Using string CSS: <div style="color: red;">
B) Using an object: <div style={{color: 'red'}}>
C) Using class names only
D) Inline styles are not supported
Answer: B
35. What will happen if you pass a
function with parentheses to an event handler like onClick={handleClick()}?
A)
The function runs immediately during render
B) The function is called only on click
C) The function never runs
D) It causes an error
Answer: A
36. Which of the following is used
to prevent default form submission behavior?
A)
event.preventDefault()
B) event.stopPropagation()
C) return false
D) setState(null)
Answer: A
37. What is the best practice for
updating state when new state depends on old state?
A)
Using object spread operator
B) Passing a function to the state setter
C) Directly assigning new state
D) Using setTimeout
Answer: B
38. How is a React component
defined?
A)
As a function returning JSX
B) As a class extending React.Component
C) Both A and B
D) As a string
Answer: C
39. Which is true about React
fragments?
A)
They add an extra DOM node
B) They allow grouping multiple elements without extra nodes
C) They are used to create portals
D) They are deprecated
Answer: B
40. How can you optimize re-renders
of functional components?
A)
Using React.memo
B) Using setState
C) Using useEffect
D) Using componentDidUpdate
Answer: A
41. How can you prevent event
bubbling in React?
A)
Using event.stopPropagation()
B) Using event.preventDefault()
C) Using return false
D) Using event.stopImmediatePropagation()
Answer: A
42. What will useState(null)
initialize state as?
A)
Undefined
B) Null
C) Zero
D) Empty string
Answer: B
43. What is the default value of
props if not provided?
A)
Null
B) Undefined
C) Empty string
D) Zero
Answer: B
44. How do you update an object in
React state?
A)
By directly modifying the object
B) By creating a new object with updated properties using spread operator
C) Using Object.assign() inside render
D) React does not allow object state
Answer: B
45. What is the difference between defaultValue
and value in input elements?
A)
value is for uncontrolled components
B) defaultValue is for controlled components
C) value sets the input value and controls it, defaultValue sets initial value
for uncontrolled inputs
D) They are the same
Answer: C
46. Which lifecycle phase do hooks
like useEffect replace in functional components?
A)
componentDidMount, componentDidUpdate, componentWillUnmount
B) render only
C) constructor only
D) None
Answer: A
47. How do you pass children
elements inside a component?
A)
Using a special children prop
B) Using a custom prop named child
C) Using props.elements
D) You cannot pass children
Answer: A
48. What happens when you set state
to the same value?
A)
React skips the re-render
B) React forces a re-render anyway
C) React throws an error
D) React crashes
Answer: A
49. Which of the following is a
valid way to define a component?
A)
function MyComponent() { return <div>Hello</div> }
B) const MyComponent = () => <div>Hello</div>
C) class MyComponent extends React.Component { render() { return
<div>Hello</div> } }
D) All of the above
Answer: D
50. How do you access event target
value in an event handler?
A)
event.target
B) event.value
C) event.target.value
D) event.currentTarget.value
Answer: C
