🔹MCQs Of Class 6
Handling Events in React
🔹 Section 1: General
Concepts (1–10)
1.
What
is an event in React?
a) A CSS property
b) A user action like click or input
c) A component
d) A variable
✅ Answer: b) A user action like click or input
2.
Which
of the following is a common React event handler?
a) onLoop
b) onWhile
c) onClick
d) onHover
✅ Answer: c) onClick
3.
What
does onChange detect?
a) Mouse movement
b) Value change in an input field
c) A CSS change
d) API call
✅ Answer: b) Value change in an input field
4.
Which
event is used to handle form submissions?
a) onClick
b) onHover
c) onSubmit
d) onEnter
✅ Answer: c) onSubmit
5.
Which
keyword prevents the default action of a form?
a) event.preventStop()
b) event.blockDefault()
c) event.preventDefault()
d) event.stopAction()
✅ Answer: c) event.preventDefault()
6.
In
React, events are handled using:
a) CSS
b) Inline JavaScript
c) JSX syntax
d) HTML tags
✅ Answer: c) JSX syntax
7.
What
is useState used for in event handling?
a) Storing styles
b) Storing data between pages
c) Managing state and updating UI
d) Declaring constants
✅ Answer: c) Managing state and updating UI
8.
What
does the following code do?
<button onClick={handleClick}>Click</button>
a) Defines a new variable
b) Attaches a click event handler
c) Adds a new component
d) Does nothing
✅ Answer: b) Attaches a click event handler
9.
Which
React hook is used for state management?
a) useEffect()
b) useState()
c) useClick()
d) useChange()
✅ Answer: b) useState()
10. What
must you pass to useState()?
a) CSS class
b) A component
c) Initial value
d) An event
✅ Answer: c) Initial value
🔹 Section 2: onClick (11–20)
11.
Which
of the following is a correct onClick event?
a) onClick="handleClick()"
b) onClick={() => handleClick()}
c) onclick="handleClick"
d) click="handleClick"
✅ Answer: b) onClick={() => handleClick()}
12.
Which
method is triggered when a button is clicked?
a) handleHover()
b) handleClick()
c) clickEvent()
d) buttonClick()
✅ Answer: b) handleClick()
13.
In
React, onClick is written in:
a) lowercase
b) snake_case
c) camelCase
d) UPPERCASE
✅ Answer: c) camelCase
14.
Which
is the output of this code?
jsx
CopyEdit
const [count, setCount] = useState(0);
<button onClick={() =>
setCount(count + 1)}>Click</button>
a)
Button becomes disabled
b) Page reloads
c) count increases by 1 every click
d) Nothing happens
✅ Answer: c) count increases by 1 every click
15.
onClick
is usually attached to:
a) <div>
b) <form>
c) <button>
d) <style>
✅ Answer: c) <button>
16.
Where
is setText("Hello") typically called?
a) Inside return()
b) Inside event handler
c) Inside useState()
d) Inside component name
✅ Answer: b) Inside event handler
17.
What
will setCount(count++) do?
a) Increase count by 2
b) Not update count properly
c) Increase count correctly
d) Reset count
✅ Answer: b) Not update count properly
18.
What’s
the recommended way to update state based on previous value?
a) setState(count++)
b) setCount(count + 1)
c) setCount(prev => prev + 1)
d) setState(++count)
✅ Answer: c) setCount(prev => prev + 1)
19.
Can
you attach onClick to an image in React?
a) No
b) Yes
c) Only on buttons
d) Only if wrapped in a div
✅ Answer: b) Yes
20.
What
will console.log("Clicked") inside onClick do?
a) Show in browser log
b) Show on webpage
c) Stop page
d) Refresh browser
✅ Answer: a) Show in browser log
🔹 Section 3: onChange
(21–35)
21.
What
does onChange help with in forms?
a) Submit form
b) Detects typing or change
c) Saves data to database
d) Deletes form
✅ Answer: b) Detects typing or change
22.
What
is the output of onChange={(e) => console.log(e.target.value)}?
a) Logs value of input field
b) Logs entire page
c) Logs function
d) Logs component
✅ Answer: a) Logs value of input field
23.
In
React, where is the value of the input stored?
a) Directly in the DOM
b) In state variable
c) In a local variable
d) In an HTML tag
✅ Answer: b) In state variable
24.
Which
syntax is correct for onChange?
a) onchange={setValue}
b) onChange={(event) => setValue(event.value)}
c) onChange={(e) => setValue(e.target.value)}
d) onChange(setValue)
✅ Answer: c) onChange={(e) => setValue(e.target.value)}
25.
What
is the purpose of e.target.value?
a) Accesses button text
b) Accesses the CSS
c) Gets the current value of the input
d) Returns event name
✅ Answer: c) Gets the current value of the input
26.
What
is a controlled component in React?
a) Uses state to control UI
b) Uses props only
c) Uses raw HTML
d) Can’t be changed
✅ Answer: a) Uses state to control UI
27.
What
input type does onChange support?
a) Only text
b) Only number
c) Text, checkbox, radio, etc.
d) Only date
✅ Answer: c) Text, checkbox, radio, etc.
28.
What
will happen if onChange is missing from an input field?
a) React will show error
b) Input won’t work
c) Value will not update in state
d) Input will be removed
✅ Answer: c) Value will not update in state
29.
Checkbox
value is accessed using:
a) e.target.text
b) e.value
c) e.target.checked
d) e.target.input
✅ Answer: c) e.target.checked
30. What does the following render?
<input type="text" onChange={(e)
=> setText(e.target.value)} />
<p>{text}</p>
a)
Static text
b) Real-time text update
c) Button
d) Error
✅ Answer: b) Real-time text update
31.
Which
is NOT a valid input type for onChange?
a) text
b) number
c) password
d) image
✅ Answer: d) image
32.
Which
event updates live typing?
a) onSubmit
b) onChange
c) onClick
d) onHover
✅ Answer: b) onChange
33.
Is
onChange used with select dropdowns?
a) No
b) Yes
c) Only with radio
d) Only with text
✅ Answer: b) Yes
34.
The
checked attribute in a checkbox refers to:
a) Label
b) Input field
c) Boolean true/false
d) Value attribute
✅ Answer: c) Boolean true/false
35.
To
get the selected value of a dropdown:
a) e.target.selectedValue
b) e.value
c) e.target.value
d) e.select.value
✅ Answer: c) e.target.value
🔹 Section 4: onSubmit and
Forms (36–50)
36.
What
does onSubmit do?
a) Prevents typing
b) Executes on form submission
c) Hides form
d) Auto-refreshes page
✅ Answer: b) Executes on form submission
37.
To
prevent page reload on form submit:
a) return false
b) e.preventDefault()
c) stopRefresh()
d) setTimeout
✅ Answer: b) e.preventDefault()
38.
Which
tag is used with onSubmit?
a) <input>
b) <div>
c) <form>
d) <section>
✅ Answer: c) <form>
39.
Which
of the following prevents form from submitting blank?
a) if(input.value !== "")
b) if(!input)
c) if(input.length > 0)
d) if(input !== "")
✅ Answer: d) if(input !== "")
40.
In
React, forms are usually controlled using:
a) Local variables
b) Refs
c) State
d) Console logs
✅ Answer: c) State
41.
Which
one is a valid onSubmit handler?
a) <form onsubmit={submitHandler}>
b) <form onSubmit={() => submitHandler()}>
c) <form onSubmit={submitHandler}>
d) Both b and c
✅ Answer: d) Both b and c
42.
Which
input type is NOT usually handled with onSubmit?
a) text
b) email
c) button
d) checkbox
✅ Answer: c) button
43.
Which
hook is used to store the input values?
a) useForm
b) useSubmit
c) useState
d) useClick
✅ Answer: c) useState
44.
A
form handler must call:
a) updateForm()
b) handleSubmit()
c) handleFormSubmit()
d) preventDefault()
✅ Answer: d) preventDefault()
45.
Where
is onSubmit written?
a) On button
b) On label
c) On input
d) On form
✅ Answer: d) On form
46.
What
happens if you don’t use e.preventDefault() in a form?
a) It will work fine
b) Page will reload
c) State will update twice
d) Error will occur
✅ Answer: b) Page will reload
47.
How
do you handle multiple form fields in React?
a) Use one useState per input
b) Use multiple components
c) Use array
d) Use fetch
✅ Answer: a) Use one useState per input
48.
React
form data is processed using:
a) JSX only
b) State and event handlers
c) CSS
d) Class selectors
✅ Answer: b) State and event handlers
49.
What
does this code mean?
<form onSubmit={handleSubmit}>
a) Handle key press
b) Handle value change
c) Handle submit event
d) Handle loading
✅ Answer: c) Handle submit event
50.
Which
function prevents form's default behavior?
a) e.stopPropagation()
b) e.stopDefault()
c) e.preventDefault()
d) stopPage()
✅ Answer: c) e.preventDefault()
