ReactJS Tutorial for Beginners - 9 - State and setState

❮ 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 ❯