create 100 mcq with answer from this notes of

unit 2
Here are 100 MCQs (Multiple Choice Questions) with answers based on Unit 2: React Basics
from your notes.

1. Which component type was the only way to handle state in React before version
16.8?
A) Functional Component
B) Class Component
C) Arrow Function
D) Pure Function
Answer: B

2. Which React feature in version 16.8 allows functional components to use state?
A) Redux
B) AJAX
C) Hooks
D) Context
Answer: C

3. Props in React are:

A) Mutable
B) Arrays
C) Read-only
D) Functions
Answer: C

4. State in React can be updated using:

A) this.modify()
B) this.state()
C) this.setState()
D) this.props()
Answer: C
5. What is the correct way to pass a prop called “color” to a component?
A) <Car color-”red” />
B)
C) <Car {color}=’red’ />
D) <Car.color=red />
Answer: B

6. Which file extension is used for React component files?

A) .jsx
B) .css
C) .java
D) .docx
Answer: A

7. In a class component, props are accessed with:

A) props.name
B) this.props.name
C) these.props.name
D) self.props.name
Answer: B

8. What is returned by a functional component?

A) HTML
B) Python
C) JSX
D) XML
Answer: C

9. Which keyword is used to export a React component so it can be imported

elsewhere?
A) import
B) module
C) export default
D) component
Answer: C

10. The state of a React component is:

A) Immutable
B) Mutable
C) Invisible
D) Temporary
Answer: B
11. Which method is used to initialize state in a class component?
A) init()
B) setup()
C) constructor()
D) useEffect()
Answer: C

12. What is the output when you change state using setState()?
A) Nothing
B) UI is updated
C) New variable is created
D) Application restarts
Answer: B

13. How are React functional components written?

A) As classes
B) As objects
C) As functions
D) As variables
Answer: C

14. What type of data can props carry?

A) Only numbers
B) Only strings
C) Any valid JavaScript data
D) Only objects
Answer: C

15. Which method is used in a class to render output to the DOM?

A) render()
B) output()
C) export()
D) show()
Answer: A

16. In a functional component, props are accessed as:

A) this.props
B) props
C) self.props
D) function.props
Answer: B
17. In React, what is used to pass data from parent to child component?
A) components
B) state
C) props
D) variables
Answer: C

18. What are “props” short for?

A) Proper Values
B) Properties
C) Proposal
D) Proposals
Answer: B

19. Which of these is NOT a rule for using state in a class component?
A) Must call super(props) in constructor
B) Must name state variable “state”
C) Can change state directly with =
D) Should use setState()
Answer: C

20. A functional component in React can use state via:

A) this.state
B) useState()
C) setStatus()
D) props
Answer: B

21. In React, which are “immutable”?

A) State
B) Props
C) Variables
D) Context
Answer: B

22. In React, which is “mutable”?

A) State
B) Props
C) Variables
D) CSS
Answer: A
23. The ability to handle events in React is known as:
A) Event capturing
B) Event handling
C) Event bubbling
D) Event streaming
Answer: B

24. React event handlers are written in:

A) Lowercase
B) CamelCase
C) Uppercase
D) PascalCase
Answer: B

25. To prevent default action in a React event, you use:

A) event.stop()
B) event.block()
C) event.preventDefault()
D) event.defaultPrevent()
Answer: C

26. What is the output of the following code?

<Car brand={carName} />

A) Passes "carName" as prop

B) Passes carName’s value as prop
C) Causes error
D) Does nothing
Answer: B

27. What is called when an event occurs in React?

A) Syntax
B) Handler
C) Listener
D) Dialogue
Answer: B
28. The main method to display content in a functional React component is:
A) show()
B) output()
C) return()
D) render()
Answer: C

29. What type of data can state store?

A) Only numbers
B) Only strings
C) Only objects
D) Any valid data
Answer: D

30. How do you create a button in React?

A) Click
B) Click
C) Click
D) Click
Answer: A

31. What does “this.setState()” do?

A) Changes props
B) Changes state directly
C) Requests React to update the UI
D) Re-runs the constructor
Answer: C

32. To pass data to a functional child component, you use:

A) state
B) props
C) setData
D) getData
Answer: B

33. Which React component syntax is correct for exporting a default component?
A) export MyComponent
B) export default MyComponent
C) module.exports = MyComponent
D) default export MyComponent
Answer: B
34. The main difference between Props and State is:
A) Props are mutable, State is immutable
B) Props are immutable, State is mutable
C) Both are immutable
D) Both are mutable
Answer: B

35. In React, ‘onClick’ is an example of a/an:

A) Prop
B) State
C) Event
D) Class
Answer: C

36. In the functional component, the first argument to the function is:
A) event
B) state
C) props
D) variables
Answer: C

37. Which of the following CANNOT trigger state changes in React?

A) User input
B) Timer
C) Calling setState()
D) Direct assignment (this.state = ...)
Answer: D

38. React enforces that all component names must start with:
A) Uppercase
B) Lowercase
C) Number
D) Underscore
Answer: A

39. State in React class component is typically initialized in:

A) render()
B) constructor()
C) return()
D) start()
Answer: B
40. What is used to define dynamic content in JSX?
A) {} braces
B) () parentheses
C) <> tags
D) [] brackets
Answer: A

41. Which attribute of a React element receives the event handler function?
A) handle
B) onEvent
C) onClick
D) event
Answer: C

42. The main function of “props” in React is to:

A) Update the UI
B) Fetch data
C) Pass data from parent to child
D) Style elements
Answer: C

43. In React, state is accessible via:

A) this.state
B) props.state
C) this.props.state
D) component.state
Answer: A

44. Use of setState() in React triggers:

A) UI update
B) Browser reload
C) Server request
D) No effect
Answer: A

45. When a button's 'onClick' handler is set to a function, this function is called
when:
A) The page loads
B) The button is clicked
C) The component is mounted
D) The component is updated
Answer: B
46. How should you pass a number as a prop to a component?
A) age="10"
B) age={10}
C) age:
D) age=10
Answer: B

47. Props in React are:

A) functions
B) mutable
C) immutable
D) replaced
Answer: C

48. In React, the parent component can:

A) Change the child’s state directly
B) Pass props to child
C) Change child’s props directly
D) Remove child
Answer: B

49. A single page application using React usually contains:

A) One HTML file
B) Many HTML files
C) Only JS file
D) One CSS file
Answer: A

50. State in React can be:

A) Changed only within component
B) Changed by props
C) Changed by parent
D) None
Answer: A

51. When you click a button with onClick in React, you call:
A) A method
B) A variable
C) An array
D) A string
Answer: A
52. JSX allows embedding expressions inside HTML using:
A) ()
B) {}
C) //
D) ""
Answer: B

53. What will this return in a class component’s render function?

A) Current object
B) Window
C) State object
D) Props object
Answer: A

54. Which of these is NOT a valid way to update a state variable in a class
component?
A) this.state.value = 2
B) this.setState({value: 2})
C) setState({value: 2})
D) this.setState(function)
Answer: A

55. The main difference between class and function components before Hooks
was:
A) Styles
B) State management
C) Placement
D) Naming
Answer: B

56. Functional components become almost as powerful as class components with

the introduction of:
A) Classes
B) Hooks
C) Props
D) Files
Answer: B
57. Which keyword is necessary in JSX for multiple adjacent elements to be
returned?
A) div
B) wrap
C) parent
D) container
Answer: A

58. The initial state for a class component can be set:

A) Only in the render method
B) Only in the constructor
C) Only in setState
D) Only at export
Answer: B

59. How do you pass multiple props to a component in React?

A) Separate by comma
B) Separate by space
C) Like HTML attributes
D) In an array
Answer: C

60. If you try to modify props inside a component, React will:

A) Do nothing
B) Show warning/error
C) Update props
D) Update state
Answer: B

61. Which statement is TRUE about state in React?

A) It is read-only
B) It cannot be changed after initial setup
C) It can only be updated using setState
D) It can only be used in functional components
Answer: C

62. How do you pass a string 'car' as brand prop to Car component?
A)
B)
C) <Car brand:'car' />
D) <Car.car />
Answer: B
63. What is a prop in React?
A) A function argument
B) An inline style
C) An HTML tag
D) An ES6 feature
Answer: A

64. Which file can contain both JSX and regular JS code in a React project?
A) App.html
B) App.js
C) App.css
D) App.json
Answer: B

65. In React, a component with state is called:

A) Stateless
B) Stateful
C) Static
D) Immutable
Answer: B

66. Which argument is always available in class component methods like render()?
A) this
B) render
C) state
D) props
Answer: A

67. How should you NOT update state in a React class component?
A) this.setState({})
B) this.state = {}
C) this.setState(function)
D) setState({})
Answer: B

68. The main purpose of using state in React is to:

A) Share data globally
B) Store data that changes over time
C) Store static data
D) Store methods
Answer: B
69. State variables in React are best kept:
A) As simple as possible
B) Nested deeply
C) Only in props
D) Always as strings
Answer: A

70. Which sequence of functions occurs when a button in React is clicked to

change state?
A) Handler -> setState -> Re-render
B) Update -> Props -> Render
C) Event -> Export -> Return
D) SetState -> Export -> Render
Answer: A

71. Which of these is "read-only" in a React component?

A) State
B) Props
C) Class
D) Function
Answer: B

72. What will happen if you call setState() inside render()?

A) Nothing
B) Infinite loop
C) Error
D) Only first call succeeds
Answer: B

73. Which React keyword is used to refer to the instance of the class component?
A) this
B) instance
C) state
D) ref
Answer: A

74. Which statement about props is FALSE?

A) Props are variables
B) Props are read-only
C) Props can be changed by child
D) Props pass data to child
Answer: C
75. Which is the correct way to import a component called Header?
A) import Header from 'Header';
B) import {Header} from './Header';
C) import Header from './Header';
D) require(Hheader);
Answer: C

76. When updating state, what happens to the UI?

A) Nothing
B) UI is updated
C) Event is triggered
D) Component is exported
Answer: B

77. How can a component render dynamic data from state?

A) By returning JSX with variables inside {}
B) By using only static text
C) By changing props
D) By using variables outside render
Answer: A

78. A button with onClick changes component color by:

A) Using setState
B) Changing props
C) Calling parent function
D) Updating file
Answer: A

79. Which of the following is a valid way to return dynamic JSX content?
A) return ;
B) return 123;
C) return

{state.title}
;
D) return state.title;
Answer: C
80. What is the output after clicking a button that changes color state from “red”
to “blue”?
A) Stays red
B) Changes to blue
C) Changes to green
D) No output
Answer: B

81. How do you access state in the render method?

A) this.state.variable
B) state.variable
C) this.variable
D) props.variable
Answer: A

82. How can we prevent default event behavior in a React event handler?
A) return false
B) event.preventDefault()
C) stop()
D) this.event.prevent()
Answer: B

83. Which one is NOT a use of props in React?

A) Customize child components
B) Pass state
C) Transfer data
D) Update parent state
Answer: D

84. A prop is passed to the component as an _________ object.

A) empty
B) input
C) argument
D) export
Answer: C

85. Which value in state can be changed?

A) After setState only
B) In constructor only
C) Never
D) Directly at any time
Answer: A
86. What happens if you mutate state directly (without setState) in React?
A) UI does not update
B) UI updates
C) setState is called automatically
D) Error
Answer: A

87. Props can be used to:

A) Change parent state
B) Change sibling state
C) Pass data to children
D) Render a function
Answer: C

88. In the class component, you access current data in:

A) this.state
B) this.props
C) this.data
D) this.export
Answer: A

89. Which method makes a component interactive?

A) state
B) props
C) return
D) export
Answer: A

90. In React, can a component have both state and props?

A) Yes
B) No
C) Only in class components
D) Only in functional components
Answer: A

91. Which of the following shows correct way to add an event handler in React?
A) Click
B) Click
C) Click
D) Click
Answer: B
92. State is used to:
A) Store data that does not change
B) Store data that changes during app’s life
C) Store only immutable data
D) Store only numbers
Answer: B

93. The correct way to declare a functional component named “Header” is:
A) function Header() { ... }
B) def Header(): ...
C) let Header() { ... }
D) Header = () { ... }
Answer: A

94. Which React method updates the state?

A) setStatus()
B) setState()
C) set()
D) updateState()
Answer: B

95. Which of the following cannot be directly assigned as a new value in a class
component?
A) this.setState
B) this.state.value = 10
C) let value = 10
D) None
Answer: B

96. Which of the following is used to render a child component inside a parent?
A)
B) Child.render()
C) render(<Child>)
D) export Child
Answer: A

97. Which part of a class component's state can be modified?

A) None
B) Any value with setState
C) Only in constructor
D) Only numeric values
Answer: B
98. Props in React are similar to:
A) Function arguments
B) Local variables
C) Objects
D) Arrays
Answer: A

99. If you want component to remember user input, you use:

A) Props
B) State
C) Export
D) Variable
Answer: B

100. Which method triggers a UI update in React after altering state?

A) setData()
B) setState()
C) render()
D) this.props()
Answer: B

If you want this as a document or need explanations for any items, let me know!