Class Component

Class components in React.js are ES6 classes that extend from React.Component and must contain a render method that returns JSX. Here’s a step-by-step guide to creating and using class components in React:

Creating a Class Component

A class component is a JavaScript class that extends React.Component and includes a render method.

Create the Component File: Create a new file for your component, e.g., MyComponent.js.


// src/MyComponent.jsx
import React, { Component } from 'react';
class MyComponent extends Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
      </div>
    );
  }
}
export default MyComponent;

Using the Component: Import and use this component in your main application file, e.g., App.js.


// src/App.jsx
import React, { Component } from 'react';
import MyComponent from './MyComponent';

class App extends Component {
  render() {
    return (
      <div>
        <MyComponent />
      </div>
    );
  }
}
export default App;

Output will be:- Hello, World!

Adding Props to a Class Component

Props are used to pass data from parent to child components.

Modify the Component to Accept Props:


// src/MyComponent.jsx
import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return (
      <div>
        <h1>Hello, {this.props.name}!</h1>
      </div>
    );
  }
}
export default MyComponent;

Pass Props to the Component:


// src/App.jsx
import React, { Component } from 'react';
import MyComponent from './MyComponent';

class App extends Component {
  render() {
    return (
      <div>
        <MyComponent name="World" />
      </div>
    );
  }
}
export default App;

Output will be:- Hello, World!

Class Component – Interview Questions

Q 1: What is a class component?

Ans: A class component is created using ES6 classes and extends React.Component.

Q 2: How is the state handled in class components?

Ans: State is managed using this.state and updated with this.setState().

Q 3: What are lifecycle methods?

Ans: Methods like componentDidMount() and componentDidUpdate() control component behavior.

Q 4: Are class components still used?

Ans: Yes, but they are being replaced by function components with hooks.

Q 5: What is the main drawback of class components?

Ans: More boilerplate code and complexity compared to function components.

Class Component – Objective Questions (MCQs)

Q1. Which keyword is used to create a Class Component in React?





Q2. Class components must extend:





Q3. Which method is mandatory inside a Class Component?





Q4. How do Class Components manage state?





Q5. Which lifecycle method is called after a component is mounted?





Related Class Component Topics