React Initial State: How to Initialize State in React

0
354
ReactJS Initial State Tutorial

Each component in React has its state, and we can define its initial state. Let us say, for example, if an event occurs on the web page or we receive the data from the AJAX request then we must reset the component state and update the data of the component. We can also define the Initial State for the particular component.

React Initial State

There are two ways to initialize state in a React component:

  1. Inside the constructor
  2. Directly inside the class

Inside the constructor

When the component class is created, the constructor is the first method called, so it’s the right place to initialize everything – state included. The class instance has already been created in memory, so you can use this keyword to set properties on it. When you write a constructor is to make sure to call the parent class’ constructor.

Directly Inside the Class

The second way to initialize state is directly inside the class definition, using a class property. But! If you’re using Create React App to bootstrap your projects, it already has the class properties transform turned on, and you can start using this class property syntax today.

Step 1: Make one react project by typing the following commands.

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

It will open a browser, and at port 3000, our app is running. When you change any line of code, then you do not need to refresh the page, it will stimulate automatically, and you can see the updated view.

Step 2: Go to the src >> App.js file and define one initial state.

// App.js

import React, { Component } from 'react';

class App extends Component {
  state = {
    name: 'AppDividend'
  };
  render() {
    return (
      <div className="App">
        {this.state.name}
      </div>
    );
  }
}

export default App;

Here, I have defined the Initial State of the component class. If we want to change the state after clicking the button and get the AJAX request-response, then we just write the following line to change the state.

// App.js

this.setState({
  name: 'React Tutorial'
})

Example #2

We can also define the initial state of the component by the following constructor method.

// App.js

import React, { Component } from 'react';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      name: 'AppDividend'
    };
  }
  render() {
    return (
      <div className="App">
        {this.state.name}
      </div>
    );
  }
}

export default App;

Remember,  you do not need to change the state directly except for the initial state, we always need to use the setState method to change the state.

Also, please do not write setState() in the constructor. It will not work.

So, our React Initial State Tutorial is over. Checkout for the next React.js example.

Leave A Reply

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.