Learn State In Class Based Component In React Js

Learn State in Class Based Component in React JS 🗂️ In React, State is what makes a component dynamic and interactive. It allows a component to store, track, and update its own data over time. Whenever the state changes, React automatically re-renders the component to reflect the new data on the screen.

In this tutorial, we will learn:

What is State?

State is a built-in object in a React class component that holds data specific to that component. Unlike props (which are passed from parent to child), state is owned and managed by the component itself. When state changes, the component automatically re-renders to show the updated UI.

State vs Props

Step 1: Define State in a Class Component

State is defined inside the class using the state property.

import React, { Component } from "react";

export class News extends Component {

  state = {
    articles: [],
    loading: false,
  };

  render() {
    return (
      <div>
        <h2>Welcome to News App 📰</h2>
      </div>
    );
  }
}

export default News;

Here, articles will hold the list of news articles and loading will track whether data is being fetched. Both start with default values.

Step 2: How to Update State using setState()

You should never update state directly like this:

// ❌ Wrong - never do this
this.state.loading = true;

Always use setState() to update state. This tells React to re-render the component.

// ✅ Correct - always use setState()
this.setState({ loading: true });

Step 3: Full Example — State with a Button

Let's see a simple example where clicking a button updates the state and re-renders the component.

import React, { Component } from "react";

export class Counter extends Component {

  state = {
    count: 0,
  };

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div className="text-center my-4">
        <h2>Count: {this.state.count}</h2>
        <button className="btn btn-warning" onClick={this.increment}>
          Increase Count ➕
        </button>
      </div>
    );
  }
}

export default Counter;

Every time the button is clicked, setState() updates count and React automatically re-renders the component with the new value.

Step 4: Using State in Our News App

Now let's apply state to our real News component. We will store a list of articles in state and render them using the NewsItem component we built earlier.

import React, { Component } from "react";
import NewsItem from "./NewsItem";

export class News extends Component {

  state = {
    articles: [
      {
        title: "React 19 Released 🚀",
        description: "React 19 brings exciting new features for developers.",
        imageUrl: "",
        newsUrl: "#",
      },
      {
        title: "JavaScript Tops Developer Survey 🏆",
        description: "JavaScript remains the most popular language for the 10th year in a row.",
        imageUrl: "",
        newsUrl: "#",
      },
      {
        title: "GitHub Copilot Gets Smarter 🤖",
        description: "GitHub Copilot now supports multi-file editing and better context awareness.",
        imageUrl: "",
        newsUrl: "#",
      },
    ],
    loading: false,
  };

  render() {
    return (
      <div className="container my-4">
        <h2 className="text-center mb-4">Welcome to News App 📰</h2>
        {this.state.articles.map((article, index) => (
          <NewsItem
            key={index}
            title={article.title}
            description={article.description}
            imageUrl={article.imageUrl}
            newsUrl={article.newsUrl}
          />
        ))}
      </div>
    );
  }
}

export default News;

Now the News component owns its data through state. In the next tutorial, we will use componentDidMount() to replace this hardcoded list with live data from a real API.

Features and Learnings:-