ReactJS Tutorial for Beginners - 9 - State and setState

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

❮ Previous Chapter Next Chapter ❯

---

In this chapter, we will learn:

1. How to create a state object in the component

2. How to use state object in the component

3. How to change the state object in the component using setState() method

React state

The state is a built-in object in React components. In the state object, we store property values that belong to the component. When the state object changes, the component re-renders. The state object is modified with the setState() function.

The props serve a similar purpose to the state. Both are plain JavaScript objects. The difference between them is that props get passed to the component whereas the state is managed within the component.

Creating the state Object

Let's create a StudentComponent and create and initialize the state object in the constructor:

import React, { Component } from 'react'

class StudentComponent extends Component {
    constructor(props) {
        super(props)

        this.state = {
                 firstName: "Ramesh"
        }
    }

    render() {
        return (
            <div>
                <h1> Hello Student</h1>
            </div>
        )
    }
}

export default StudentComponent

The state object can contain as many properties. For example, let's specify all the properties your component need:

import React, { Component } from 'react'

class StudentComponent extends Component {
    constructor(props) {
        super(props)

        this.state = {
                 firstName: "Ramesh",
                 lastName:"Fadatare",
                 rollNo: 123,
                 age: 20,
                 books: ["C programming", "C++ programming", "Data Structure and Algorithms"]
        }
    }

    render() {
        return (
            <div>
                <h1> Hello Student</h1> <hr/>
            </div>
        )
    }
}

export default StudentComponent

Now, we have seen how to create state and initiate the state object in a component. 

Let's see how to use state object in the component.

Using the state Object

Refer to the state object anywhere in the component by using the following syntax:

this.state.propertyname

Example: Refer to the state object in the render() method:

import React, { Component } from 'react'

class StudentComponent extends Component {
    constructor(props) {
        super(props)

        this.state = {
                 firstName: "Ramesh",
                 lastName:"Fadatare",
                 rollNo: 123,
                 age: 20,
                 books: ["C programming", "C++ programming", "Data Structure and Algorithms"]
        }
    }

    render() {
        return (
            <div>
                <h1> Student Details</h1> <hr/>
                <h3> First Name: {this.state.firstName }</h3>
                <h3> Last Name: {this.state.lastName }</h3>
                <h3> Roll No: {this.state.rollNo } </h3>
                <h3> Age: {this.state.age }</h3>
                <h3> {this.state.books} </h3>
            </div>
        )
    }
}

export default StudentComponent

Let's import above component into the App component and see the result in the browser:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import StudentComponent from './components/StudentComponent';

function App() {
  return (
    <div className="App">
         <header className="App-header">
            <StudentComponent />
        </header>
    </div>
  );
}

export default App;

Hit URL http://localhost:3000/ in Browser

Changing the state Object using setState() Method

To change a value in the state object, use the this.setState() method.

When a value in the state object changes, the component will re-render, meaning that the output will change according to the new value(s).

For example, let's add a button with an onClick event that will change the rollNo and age of properties of the student:

import React, { Component } from 'react'

class StudentComponent extends Component {
    constructor(props) {
        super(props)

        this.state = {
                 firstName: "Ramesh",
                 lastName:"Fadatare",
                 rollNo: 123,
                 age: 20,
                 books: ["C programming", "C++ programming", "Data Structure and Algorithms"]
        }
    }

    updateStudent(){
        this.setState({
            rollNo: 124,
            age: 21
        })
    }
    render() {
        return (
            <div>
                <h1> Student Details</h1> <hr/>
                <h3> First Name: {this.state.firstName }</h3>
                <h3> Last Name: {this.state.lastName }</h3>
                <h3> Roll No: {this.state.rollNo } </h3>
                <h3> Age: {this.state.age }</h3>
                <h3> {this.state.books} </h3>
                <button type="button" onClick={() => this.updateStudent()} >Update Student Details</button>
            </div>
        )
    }
}

export default StudentComponent

Click on "Update Student Details" button will update student details in the browser:

What's Next?

In this chapter, we have learned what is state object, how to use state object, and how to change state object using the setState() method in React with an example. In the next chapter, we will learn how to destructure props and states in React with an example.

---

❮ Previous Chapter Next Chapter ❯

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Build REST APIs with Spring Boot 4, Spring Security 7, and JWT

🆕 High-Demand 80–90% OFF

[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25

🆕 High-Demand 80–90% OFF

ChatGPT + Generative AI + Prompt Engineering for Beginners

🚀 Trending Now 80–90% OFF

Spring 7 and Spring Boot 4 for Beginners (Includes 8 Projects)

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Real-Time REST APIs with Spring Boot - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Microservices with Spring Boot and Spring Cloud

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Java Full-Stack Developer Course with Spring Boot and React JS

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Build 5 Spring Boot Projects with Java: Line-by-Line Coding

🌟 Top Rated 80–90% OFF

Testing Spring Boot Application with JUnit and Mockito

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot Thymeleaf Real-Time Web Application - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Master Spring Data JPA with Hibernate

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot + Apache Kafka Course - The Practical Guide

🎓 Student Favorite 80–90% OFF
Available in Udemy for Business

Java Testing: Mastering JUnit 5 Framework

🆕 New 80–90% OFF

Reactive Programming in Java: Spring WebFlux and Testing

🌟 Top Rated 80–90% OFF

Spring Boot + RabbitMQ Course - The Practical Guide

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Functional Programming in Java (Includes Java Collections)

🎓 Student Favorite 80–90% OFF

ChatGPT for Java Developers: Boost Your Productivity with AI

🚀 Trending Now 80–90% OFF