React Class Components: Fundamentals Quiz — Questions & Answers

Explore the essential concepts of React Class Components with these straightforward questions designed to reinforce basic understanding and practical usage.

This quiz contains 10 questions. Below is a complete reference of all questions, answer choices, and correct answers. You can use this section to review after taking the interactive quiz above.

1. Question 1: Defining a Class Component

   Which of the following best describes a React Class Component?

   • A function that returns JSX
   • A component defined using the useState hook
   • An array containing JSX elements
   • A JavaScript class that extends React.Component
   Show correct answer

   Correct answer: A JavaScript class that extends React.Component

   Explanation: A React Class Component is created by defining a JavaScript class that extends the React.Component base class. Functions that return JSX are functional components. Arrays containing JSX elements are not components themselves. The useState hook is only used in functional components.

2. Question 2: Rendering Output

   What method must be defined inside a React Class Component to return the component's UI?

   • render
   • componentDidMount
   • getElement
   • display
   Show correct answer

   Correct answer: render

   Explanation: The render method is required in React Class Components and is responsible for returning the JSX that represents the component's UI. componentDidMount is a lifecycle method, getElement and display are not React Class Component methods.

3. Question 3: Accessing Props

   How does a React Class Component access the props it receives?

   • componentProps
   • useProps()
   • props
   • this.props
   Show correct answer

   Correct answer: this.props

   Explanation: Inside a class component, props are accessed using this.props. Referencing just 'props' without 'this' works in functional components. useProps() and componentProps are not valid ways to access props in class components.

4. Question 4: State Initialization

   Where is the initial state typically set in a React Class Component?

   • Using the setState method at the top level
   • In the render method
   • Outside the class definition
   • Inside the constructor using this.state
   Show correct answer

   Correct answer: Inside the constructor using this.state

   Explanation: The initial state is usually set in the constructor by assigning an object to this.state. The render method should not set state. setState is for updating state, not initializing it, and defining state outside the class is incorrect.

5. Question 5: Updating State

   Which method is used to update the state in a React Class Component?

   • changeState
   • updateState
   • modifyState
   • this.setState
   Show correct answer

   Correct answer: this.setState

   Explanation: State in class components is updated with this.setState. The other names—changeState, modifyState, and updateState—are similar in wording but are not valid React API methods.

6. Question 6: Component Lifecycle

   What is the purpose of the componentDidMount lifecycle method in a React Class Component?

   • It is called before the component receives props
   • It runs once after the component is mounted
   • It returns the JSX output
   • It updates state directly
   Show correct answer

   Correct answer: It runs once after the component is mounted

   Explanation: componentDidMount runs once after a component has been inserted into the DOM. It is not called before receiving props, does not directly update state, and does not return JSX (that's the render method's job).

7. Question 7: Class Component Syntax

   Which syntax correctly declares a React Class Component named 'Demo'?

   • Demo = () => {}
   • function Demo()
   • class Demo extends React.Component
   • const Demo = React.createComponent()
   Show correct answer

   Correct answer: class Demo extends React.Component

   Explanation: The correct way is to declare a class with class Demo extends React.Component. Using function or arrow function syntax defines a functional component. React.createComponent() is not a valid method.

8. Question 8: State vs Props

   Which statement is true about state and props in React Class Components?

   • Both state and props are mutable by the component itself
   • Props can only be set in the constructor
   • State is only accessible outside the component
   • State is local to the component, while props are passed from parent components
   Show correct answer

   Correct answer: State is local to the component, while props are passed from parent components

   Explanation: State is managed locally within the component and can be changed by the component itself, while props are inputs from parent components. Both props and state are not equally mutable; props are read-only in child components. Props are not restricted to being set in the constructor, and state is not accessible outside the component.

9. Question 9: Default State Value

   If a class component's state is initialized as this.state = { count: 5 }, what will 'this.state.count' be initially?

   • undefined
   • 0
   • 5
   • "count"
   Show correct answer

   Correct answer: 5

   Explanation: Setting this.state = { count: 5 } in the constructor will initialize this.state.count to 5. undefined is incorrect because a value is assigned. 0 is only correct if that was the value provided. "count" is a string, not the initial value.

10. Question 10: Extending React.Component

    Why do React Class Components usually extend React.Component?

    • To inherit methods and features needed for React components
    • To enable access to HTML elements
    • To make the component global
    • To automatically include routing capabilities
    Show correct answer

    Correct answer: To inherit methods and features needed for React components

    Explanation: Extending React.Component gives class components access to lifecycle methods and state management features. It does not automatically provide access to HTML elements, include routing, or make the component global.