Custom Hooks in React
15 questions · 12 min · Medium
Handling Events in React
Test your knowledge of handling events in React, including event handlers, Synthetic Events, event arguments, forms, and common React event patterns.
- 15
- Questions
- 12 min
- Time limit
- Medium
- Difficulty
No sign-up needed · Last updated:
Score: 0 00:00
Save your score
Create a free account to keep your scores and track your progress. It is optional.
Questions to review
Related quizzes
React Component Lifecycle & useEffect Quiz – 20 Questions with Answers
20 questions · 15 min · Medium
Context API in React
15 questions · 12 min · Medium
Conditional Rendering in React
15 questions · 12 min · Medium
Components & Props in React Quiz – 15 Questions with Answers
15 questions · 12 min · Medium
Lists and Keys in ReactJS Quiz
15 questions · 12 min · Medium
All 15 questions and answers Spoilers: this shows the questions and answers. Try the quiz first! Open
-
1. Which prop is commonly used to handle a click event on a React element?
- A. onclick
- B. onClick
- C. click
- D. handleClick
Show answer
B. onClick
React uses camelCase event props such as onClick to handle click events.
-
2. How should an event handler function be passed to onClick in React?
- A. onClick={handleClick()}
- B. onClick="handleClick"
- C. onClick={handleClick}
- D. onClick="handleClick()"
Show answer
C. onClick={handleClick}
Passing the function reference allows React to call it when the event occurs.
-
3. Which React event is used to detect changes to an input field?
- A. onChange
- B. onInputChange
- C. onUpdate
- D. onModify
Show answer
A. onChange
The onChange event is commonly used to respond to changes in form input values.
-
4. What argument is commonly received by a React event handler?
- A. The component
- B. The event object
- C. The DOM tree
- D. The React state
Show answer
B. The event object
React passes an event object to the event handler containing information about the event.
-
5. Which property is commonly used to retrieve the current value of an input element?
- A. event.value
- B. event.input
- C. event.target.value
- D. event.element.value
Show answer
C. event.target.value
event.target refers to the element that triggered the event, and value contains its current value.
-
6. Which method prevents the default browser behavior for an event?
- A. stopEvent()
- B. preventDefault()
- C. cancelEvent()
- D. preventAction()
Show answer
B. preventDefault()
Calling event.preventDefault() prevents the browser's default action for that event.
-
7. Which method can be used to stop an event from propagating to parent elements?
- A. preventDefault()
- B. stopPropagation()
- C. stopEvent()
- D. cancelPropagation()
Show answer
B. stopPropagation()
stopPropagation() prevents the event from continuing through the event propagation path.
-
8. What is the recommended React naming convention for event handler functions?
- A. Names should usually start with handle
- B. Names must start with event
- C. Names must end with Event
- D. Names must be lowercase
Show answer
A. Names should usually start with handle
A common convention is to name event handlers with a handle prefix, such as handleClick or handleSubmit.
-
9. Which event is commonly used to handle the submission of a React form?
- A. onSend
- B. onSubmit
- C. onForm
- D. onPost
Show answer
B. onSubmit
The onSubmit event is attached to a form to handle its submission.
-
10. What is a SyntheticEvent in React?
- A. A replacement for React components
- B. A wrapper around the browser's native event
- C. A special React state object
- D. A type of React component
Show answer
B. A wrapper around the browser's native event
React provides a normalized event interface around native browser events.
-
11. What is the correct way to pass an argument to an event handler?
- A. onClick={handleClick(id)}
- B. onClick={() => handleClick(id)}
- C. onClick="handleClick(id)"
- D. onClick={handleClick[id]}
Show answer
B. onClick={() => handleClick(id)}
An arrow function can be used to call the handler with the desired argument when the event occurs.
-
12. What happens if you write onClick={handleClick()} instead of onClick={handleClick}?
- A. The function is generally called during rendering
- B. The function is called only after a click
- C. React automatically delays the function
- D. The event is disabled
Show answer
A. The function is generally called during rendering
Adding parentheses calls the function immediately while rendering instead of passing the function as an event handler.
-
13. Which event handler is commonly used for a checkbox input in React?
- A. onCheck
- B. onToggle
- C. onChange
- D. onSelect
Show answer
C. onChange
Checkboxes commonly use onChange, with the checked property used to determine whether the checkbox is selected.
-
14. In a React controlled input, which combination is commonly used to manage its value?
- A. value and onChange
- B. text and onClick
- C. input and onSubmit
- D. state and onLoad
Show answer
A. value and onChange
A controlled input receives its value from React state and updates that state through an onChange handler.
-
15. Which statement about React event names is correct?
- A. React uses lowercase event names such as onclick
- B. React event names use camelCase such as onClick
- C. React only supports native HTML event attributes
- D. React event names must always end with Handler
Show answer
B. React event names use camelCase such as onClick
React event props use camelCase naming, such as onClick, onChange, onSubmit, and onMouseEnter.