🔹MCQs Of Class 14: Component Communication in React
1. How do you pass data from a
parent component to a child component in React?
a)
Using state
b) Using props
c) Using useEffect
d) Using context API
Answer: b) Using props
2. Which of the following is the correct
way to access props in a functional child component?
a)
this.props
b) props parameter in function
c) state
d) context
Answer: b) props parameter in function
3. What will happen if a parent
changes the prop value passed to a child?
a)
The child will not re-render
b) The child will re-render with the new prop value
c) The parent will re-render but not the child
d) Nothing will happen
Answer: b) The child will re-render with
the new prop value
4. How does a child component
communicate data back to a parent?
a)
By calling a function passed down from the parent
b) Directly modifying parent's state
c) Using this.setState
d) Using props
Answer: a) By calling a function passed
down from the parent
5. Which React hook is commonly used
to manage state in functional components?
a)
useEffect
b) useState
c) useContext
d) useRef
Answer: b) useState
6. How can you trigger an action in
the parent component when a child component updates?
a)
Pass a callback function as a prop to the child and call it from the child
b) Use setState in the child component
c) Use the global store
d) Use the DOM directly
Answer: a) Pass a callback function as a
prop to the child and call it from the child
7. Props in React are:
a)
Mutable
b) Immutable
c) Only available in class components
d) Only used for styling
Answer: b) Immutable
8. How do you send multiple pieces
of data from parent to child?
a)
Using multiple state variables
b) Using multiple props
c) Using only one prop
d) Using refs
Answer: b) Using multiple props
9. Which attribute is used to pass
inline styles from parent to child?
a)
className
b) style
c) css
d) inlineStyle
Answer: b) style
10. When passing functions as props,
what must you be careful about?
a)
The function should not have parameters
b) Always bind the function (in class components) or use arrow functions
c) Function names should start with “on”
d) Functions cannot be passed as props
Answer: b) Always bind the function (in
class components) or use arrow functions
11. What does the useState hook
return?
a)
A state value
b) A function to update the state
c) An array containing both state value and update function
d) None of the above
Answer: c) An array containing both state
value and update function
12. In which scenario would you use
child-to-parent communication?
a)
When child needs to display data only
b) When child needs to update parent state based on user action
c) When parent updates child’s UI
d) When you want to style a component
Answer: b) When child needs to update
parent state based on user action
13. Which of the following is NOT a
way to pass data between components?
a)
Props
b) State
c) Callback functions
d) HTML attributes
Answer: d) HTML attributes
14. How can you update the parent
state from a child input field?
a)
Use a ref to access parent's state
b) Pass a callback function to child and call it with input value on change
c) Use a global variable
d) Child cannot update parent state
Answer: b) Pass a callback function to
child and call it with input value on change
15. What is the main purpose of
props in React?
a)
To pass data and event handlers from parent to child
b) To create new components
c) To store data inside a component
d) To style components
Answer: a) To pass data and event handlers
from parent to child
16. True or False: Props can be
changed inside the child component.
a)
True
b) False
Answer: b) False
17. How do you handle events like
button clicks in a child component that affect the parent?
a)
Use local state in child
b) Use event handlers passed as props from parent
c) Use lifecycle methods
d) Use this keyword
Answer: b) Use event handlers passed as
props from parent
18. What will this code snippet
output if passed from parent to child?
jsx
CopyEdit
<Child name="John"
/>
In
child:
jsx
CopyEdit
function Child(props) {
return <h1>Hello, {props.name}</h1>;
}
a)
Hello, John
b) Hello, props.name
c) Error
d) Nothing
Answer: a) Hello, John
19. Can a child component directly
modify the parent's state?
a)
Yes, always
b) No, only through callback functions
c) Only if the parent passes state as props
d) Yes, if they are siblings
Answer: b) No, only through callback
functions
20. What React concept allows a
parent component to update state based on child input?
a)
Context API
b) Lifting state up
c) Redux
d) React Router
Answer: b) Lifting state up
21. Which lifecycle hook is used to
run code after component renders?
a)
componentDidMount
b) useEffect
c) componentWillUnmount
d) render
Answer: b) useEffect
22. How can you pass a list or array
from parent to child?
a)
Using props
b) Using state only
c) Using refs
d) Using class components only
Answer: a) Using props
23. What is the correct way to loop
over an array in JSX?
a)
Using map() method
b) Using for loop inside JSX
c) Using while loop
d) Using filter() method
Answer: a) Using map() method
24. What should be added to each
element inside a loop to help React identify elements?
a)
className
b) key attribute
c) id attribute
d) ref
Answer: b) key attribute
25. If you want to send data from a child
to a parent, which of the following is necessary?
a)
Passing a function from the parent to the child
b) Passing data from parent to child as props
c) Directly accessing parent's state from child
d) Using React Router
Answer: a) Passing a function from the
parent to the child
26. What will happen if you forget
to call the callback function passed from parent in the child?
a)
The parent's state will not update
b) React will throw an error
c) Child will update parent's state directly
d) Nothing happens
Answer: a) The parent's state will not
update
27. Which of these is a common use
case for child-to-parent communication?
a)
Displaying static content
b) Form input submission
c) Styling a child component
d) Adding CSS classes
Answer: b) Form input submission
28. What is “lifting state up” in
React?
a)
Moving state from child to parent to share it with siblings
b) Moving state from parent to child
c) Using Redux for state management
d) Passing styles to child components
Answer: a) Moving state from child to
parent to share it with siblings
29. How can you prevent a child
component from re-rendering unnecessarily when the parent state updates?
a)
Use React.memo
b) Pass all data as props
c) Use useEffect
d) Use class components
Answer: a) Use React.memo
30. What is the purpose of the key
prop in React lists?
a)
Styling elements
b) Identifying elements uniquely for efficient updates
c) Passing data to child
d) Handling events
Answer: b) Identifying elements uniquely
for efficient updates
31. Can you pass JSX elements as
props?
a)
Yes
b) No
c) Only strings
d) Only numbers
Answer: a) Yes
32. What will happen if you modify
props directly inside a child component?
a)
It works fine
b) React will throw a warning or error
c) Parent state updates automatically
d) Props are copied automatically
Answer: b) React will throw a warning or
error
33. What is the proper way to handle
input change events in child components?
a)
Use local state only
b) Call a parent's callback prop with the new input value
c) Modify parent's state directly
d) Use refs
Answer: b) Call a parent's callback prop
with the new input value
34. Which of these is NOT true about
props?
a)
They are read-only
b) They can be functions
c) They can be changed inside the child
d) They can be any datatype
Answer: c) They can be changed inside the
child
35. Which React hook is useful for
updating state based on previous state?
a)
useEffect
b) useCallback
c) useState with callback function
d) useReducer
Answer: c) useState with callback function
36. How do you handle forms to send
data from child to parent?
a)
Using uncontrolled inputs only
b) By passing a callback function to child and calling it on form submit
c) By using global variables
d) By using React Router
Answer: b) By passing a callback function
to child and calling it on form submit
37. What will this code print?
jsx
CopyEdit
function Parent() {
const greet = () => alert("Hello from parent!");
return <Child onGreet={greet} />;
}
function Child(props) {
return <button onClick={props.onGreet}>Greet</button>;
}
a)
Alert with "Hello from parent!" on button click
b) Button does nothing
c) Error
d) Nothing
Answer: a) Alert with "Hello from
parent!" on button click
38. Which method is best for passing
styles dynamically from parent to child?
a)
Inline styles with style prop
b) className only
c) Global CSS files
d) CSS Modules only
Answer: a) Inline styles with style prop
39. How can you prevent a child
component from receiving updates on a prop?
a)
Use shouldComponentUpdate or React.memo
b) Use setState inside child
c) Use refs
d) Pass no props
Answer: a) Use shouldComponentUpdate or React.memo
40. In React, which data flow is
considered unidirectional?
a)
Child to Parent
b) Parent to Child
c) Sibling to Sibling
d) Both a and b
Answer: b) Parent to Child
41. How would you pass a callback
function with arguments from parent to child?
a)
Pass it directly with parameters
b) Pass a wrapper arrow function
c) Use bind only
d) It’s not possible
Answer: b) Pass a wrapper arrow function
42. Which of the following is true
about the children prop?
a)
It contains all the child elements passed inside a component’s tag
b) It cannot be accessed in functional components
c) It is used to update parent’s state
d) It stores CSS classes
Answer: a) It contains all the child
elements passed inside a component’s tag
43. Which of these is a disadvantage
of prop drilling?
a)
Makes code more readable
b) Passing props through many layers can become cumbersome
c) Improves performance
d) Avoids callbacks
Answer: b) Passing props through many
layers can become cumbersome
44. What is a common solution to
avoid prop drilling?
a)
Use context API or state management libraries
b) Use global variables
c) Use localStorage
d) Use useEffect
Answer: a) Use context API or state
management libraries
45. How do you make a controlled
input component in React?
a)
Bind value and onChange props
b) Use uncontrolled inputs only
c) Use refs
d) Use inline styles
Answer: a) Bind value and onChange props
46. What is the role of a callback
function passed from parent to child?
a)
To receive data from child and update parent state
b) To style the child
c) To render child UI
d) To define child component
Answer: a) To receive data from child and
update parent state
47. What is a stateless component?
a)
A component that uses only props and no state
b) A component that uses only state
c) A class component
d) A component that handles events
Answer: a) A component that uses only props
and no state
48. Which hook allows you to
memorize a function so it doesn’t get recreated on every render?
a)
useEffect
b) useMemo
c) useCallback
d) useState
Answer: c) useCallback
49. How do you update multiple
states based on a single child action?
a)
Call multiple callback functions passed from parent
b) Use local state only
c) Use Redux only
d) Use useEffect
Answer: a) Call multiple callback functions
passed from parent
50. What happens if you do not
provide a key prop in a list rendered in React?
a)
React will crash
b) React will log warnings and may have rendering issues
c) React will ignore it
d) Nothing
Answer: b) React will log warnings and may
have rendering issues
