🔹 MCQs Of Class 3Components - Introduction
🔹 Section 1: Functional
Components (Q1–Q15)
1.
What
is a functional component in React?
a) A class that returns JSX
b) A function that returns JSX
c) A database function
d) A JavaScript object
✔️ Answer: b
2.
Which
syntax correctly defines a functional component named Hello?
a) function Hello() { return <h1>Hello</h1>; }
b) class Hello { return <h1>Hello</h1>; }
c) Hello() => <h1>Hello</h1>
d) def Hello(): return <h1>Hello</h1>
✔️ Answer: a
3.
What
does a functional component always return?
a) String
b) Object
c) JSX
d) HTML
✔️ Answer: c
4.
What
file extension is commonly used for React components?
a) .html
b) .css
c) .jsx
d) .php
✔️ Answer: c
5.
Which
hook is commonly used in functional components for state?
a) useProp()
b) useEffect()
c) useState()
d) useComponent()
✔️ Answer: c
6.
React
functional components are typically written as:
a) Classes
b) Objects
c) JavaScript functions
d) Stylesheets
✔️ Answer: c
7.
Which
of the following is NOT a valid way to create a functional component?
a) const MyComp = () => <h1>Hi</h1>;
b) function MyComp() { return <h1>Hi</h1>; }
c) let MyComp = new Component();
d) const MyComp = function() { return <h1>Hi</h1>; }
✔️ Answer: c
8.
Which
of these is a benefit of functional components?
a) Slower rendering
b) Require more code
c) Simpler and easier to read
d) Can’t use JSX
✔Answer: c
9.
Which
React version introduced Hooks for functional components?
a) 15
b) 16.3
c) 16.8
d) 17
✔️ Answer: c
10.
Which
of the following is required to use JSX in React?
a) Node.js
b) Babel
c) Webpack
d) npm
✔️ Answer: b
11.
What
does JSX stand for?
a) Java Simple XML
b) JavaScript Syntax Extension
c) Java Source XML
d) Java Syntax Expression
✔ Answer: b
12.
What
is returned from a functional component?
a) HTML
b) JSX (which compiles to JavaScript)
c) String
d) Object
✔️ Answer: b
13.
In
which file do we usually write React components?
a) .js or .jsx
b) .txt
c) .json
d) .css
✔Answer: a
14.
Can
we write multiple functional components in the same file?
a) No
b) Yes
c) Only two
d) Only with Hooks
✔️ Answer: b
15.
How
is a component imported in React?
a) import from ComponentName;
b) require ComponentName;
c) import ComponentName from './ComponentName';
d) load ComponentName;
✔️ Answer: c
🔹 Section 2: Class
Components (Q16–Q25)
16.
How
do you define a class component?
a) function App() {}
b) class App extends React.Component {}
c) App = () => {}
d) define App = Component()
✔️ Answer: b
17.
What
method is used to return JSX in class components?
a) return()
b) output()
c) show()
d) render()
✔Answer: d
18.
What
should be extended for creating a class component?
a) React.Dom
b) Component.React
c) React.Component
d) Class.Component
✔Answer: c
19.
Which
lifecycle method is available in class components?
a) useEffect()
b) componentDidMount()
c) useState()
d) useCallback()
✔️ Answer: b
20.
What
keyword is used to define a class in React?
a) component
b) function
c) class
d) define
✔Answer: c
21.
What
is this.props used for in class components?
a) To change component state
b) To access passed props
c) To define styles
d) To add methods
✔ Answer: b
22.
Class
components must contain:
a) state only
b) props only
c) A render() method
d) A constructor always
✔️ Answer: c
23.
In
React, the constructor is used to:
a) Return JSX
b) Access API
c) Initialize state and bind methods
d) Create components
✔Answer: c
24.
Which
is true about class components?
a) They are always stateless
b) They cannot use lifecycle methods
c) They are used for complex logic
d) They do not support props
✔Answer: c
25.
Can
class components use hooks?
a) Yes
b) Only useEffect
c) No
d) Only in latest React
✔ Answer: c
🔹 Section 3: Props (Q26–Q40)
26.
What
are props in React?
a) Properties used to style components
b) Static variables
c) Inputs passed to components
d) Hooks
✔Answer: c
27.
Props
in React are:
a) Mutable
b) Immutable
c) Optional
d) Only for class components
✔ Answer: b
28.
How
are props passed to a component?
a) Using this.props
b) As function arguments
c) As HTML attributes
d) Using state
✔️ Answer: c
29.
How
do you access props in a functional component?
a) this.props.name
b) props.name
c) name.props
d) getProps(name)
✔️ Answer: b
30.
Can
props be used in both class and functional components?
a) Only functional
b) Only class
c) Yes
d) No
✔ Answer: c
31.
What
is the output of <Greeting name="Alice" />?
a) Alice
b) Hello Alice
c) Greeting
d) Component
✔ Answer: b (Assuming component says Hello, {props.name})
32.
Which
keyword is used to pass props in JSX?
a) let
b) const
c) key
d) Custom attribute name
✔️ Answer: d
33.
Props
can be:
a) Strings only
b) Strings and numbers only
c) Any data type
d) Only arrays
✔️ Answer: c
34.
What
happens if a prop is not passed to a component?
a) Error
b) Warning
c) Undefined
d) Null
✔️ Answer: c
35.
What
is the main purpose of props?
a) To define functions
b) To handle user events
c) To pass data to components
d) To manage routing
✔ Answer: c
36.
Props
are similar to:
a) Global variables
b) HTML attributes
c) Java methods
d) CSS classes
✔ Answer: b
37.
Which
statement is true about props?
a) Props can be changed inside the component
b) Props are set by the component itself
c) Props help in making components reusable
d) Props are only used in class components
✔️ Answer: c
38.
How
do you pass multiple props to a component?
a) <Comp props={...} />
b) <Comp a="1" b="2" />
c) Comp.props()
d) useProps()
✔ Answer: b
39. What
is the correct syntax to destructure props in a functional component?
a) function Comp(props.name)
b) function Comp(name)
c) function Comp({ name })
d) Comp = props => name
✔️ Answer: c
40. Props
allow components to be:
a) Static
b) Dynamic and reusable
c) Only for layout
d) Hard-coded
✔ Answer: b
🔹 Section 4: Mixed Concepts
(Q41–50)
41. Which
method is called when a class component is mounted?
a) init()
b) componentDidMount()
c) render()
d) useMount()
✔️ Answer: b
42.JSX
allows you to write:
a) HTML inside JS
b) JS inside HTML
c) CSS inside HTML
d) JS inside CSS
✔️ Answer: a
43. Which
symbol is used for JSX expression?
a) ()
b) []
c) {}
d) <>
✔️ Answer: c
44. Functional
components are also called:
a) Stateful components
b) Hook components
c) Stateless components
d) Layout components
✔ Answer: c
45. React
components names should always start with:
a) Uppercase letter
b) Lowercase letter
c) _underscore
d) Number
✔️ Answer: a
46. To
render a component in React, we use:
a) renderComponent()
b) <ComponentName />
c) display()
d) React.run()
✔️ Answer: b
47. What
is the purpose of export default?
a) Create a backup
b) Set a default style
c) Make component available in other files
d) Prevent editing
✔️ Answer: c
48. Which
keyword is used to import a component in another file?
a) use
b) require
c) import
d) include
✔ Answer: c
49. Which
of the following is a valid React element?
a) <h1>Hello</h1>
b) h1("Hello")
c) HTML("Hello")
d) document.createElement("h1")
✔️ Answer: a
50.Which
method is used to display components on screen?
a) print()
b) render()
c) display()
d) execute()
✔️ Answer: b
