NUHMAN.com

In React, class-based components are a way to define components with additional features, such as state and lifecycle methods. Here's a simple example that demonstrates how to create a class-based component with state and how to update the state.

Class-Based React Component with State Example

This example shows how to build a Counter component that uses state to keep track of a count and allows the user to increment the count when a button is clicked.

jsx

import React from 'react';

class Counter extends React.Component {
  // Step 1: Initialize state in the constructor
  constructor(props) {
    super(props);
    this.state = {
      count: 0, // The initial state for the count
    };
  }

  // Step 2: Method to update state when the button is clicked
  incrementCount() {
    this.setState({ count: this.state.count + 1 }); // Update the state
  }

  // Step 3: Render the UI
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.incrementCount()}>Increment</button>
      </div>
    );
  }
}

export default Counter;

Explanation:

1. State Initialization:

• Inside the constructor, we initialize the component's state by defining a count property and setting its initial value to 0. The state is an object, and the count is one of its properties.

jsx

this.state = {
  count: 0,
};

1. Updating State:

• The incrementCount method updates the state. We use this.setState() to modify the count property by incrementing it by 1 each time the method is called.

jsx

incrementCount() {
  this.setState({ count: this.state.count + 1 });
}

1. Rendering UI:

• In the render method, we display the current value of count using this.state.count. The button triggers the incrementCount() method when clicked, which updates the state.

jsx

<p>Count: {this.state.count}</p>
<button onClick={() => this.incrementCount()}>Increment</button>

How State Works:

• Initial State: The state is initialized in the constructor and contains the count property.
• State Update: When the user clicks the "Increment" button, it triggers the incrementCount method, which updates the state using this.setState().
• Re-rendering: React automatically re-renders the component whenever the state changes. The updated count is displayed in the UI.

Why Use Class-Based Components?

Class-based components are powerful because they:

• State Management: They have access to this.state, which allows you to store and update data within the component.
• Lifecycle Methods: Class components support lifecycle methods such as componentDidMount(), componentDidUpdate(), and componentWillUnmount(), which help you manage side effects and other behaviors at different stages of the component's life.

Note on React Hooks:

With the introduction of React Hooks in version 16.8, functional components can now handle state and side effects without needing class components. However, class components are still widely used, especially in legacy codebases. If you're working with newer code, functional components with the useState hook might be the preferred approach.

This example demonstrates the core functionality of class-based components in React, which allows for dynamic, state-driven UIs.