Handle states in React Class and Functional Components

In this article, we will see how to handle states in react class and functional components? React Components is used to split the User Interface (UI) into independent, reusable pieces. Components are the same as JavaScript functions. They accept arbitrary inputs (known as “props”) and return React elements describing what output should appear on the screen. If you need to allow the user to input something or change the Component’s variables as props, you will need setState.

It does not matter how you declare a component, whether as a function or a class, it will not modify its props.

All React Components will act like pure functions concerning their props. It means those functions that never change their inputs and always return the same outputs for the same inputs.

We create states because User Interface of applications are dynamic and change over time.

The state allows React components to change their output over time according to user actions, network responses, and anything else without breaking this rule.

Components can be defined as classes that have some additional features. Local state is a feature available only to class Components. setState is the API method provided with the library to define and manipulate state over time.

In this tutorial we will create a state in both class and function components.

First, you need to create the react app. If you do not know how to create it, we are providing a link, you can go to it and follow the process.

Table of Contents

Handle states in React class Component

Once you are done creating your app, go to the App.js file inside the src directory of your project app.

You are in your src/App.js file.

Step 01: import the required module and files.

You need to import React to call react elements. If you do not import React, it will take it as simple HTML, and when you call any of react components, it will throw an error or do not take your code as JSX form.

The Component is a property of react. You need to import it if you want to use react components.

The styles.css links to the file for giving the styles to app UI.

import React, {Component} from 'react';
import "./styles.css";

Step 02 : To create a state in react class component, you need to create a class component first. That will render the react components. The syntax for creating a class component in react is:

class App extends Component {
  render() {
    return ();
  }
}
export default App;

Note: If you do not import component, then you can use it as:

import React from 'react';
import "./styles.css";
class App extends React.Component {
  render() {
    return ();
  }
}
export default App;

Step 03 : Now, initialize the state in react class component. First you need to create a constructor function inside that you can initialize the state.

constructor() {
    super();
    this.state = {
      std: [
        {
          name: "Ali",
          rollno: "f16se163"
        },
        {
          name: "Bilal",
          rollno: "f16sw159"
        },
        {
          name: "Sahil",
          rollno: "f16sw179"
        }
      ]
    };
  }

Step 04: You have initialized state now, render the components to see the result on your app UI.

<div>
        {this.state.std.map(student => (
          <h1 key={student.rollno}>
          Student Name: {student.name}
          </h1>
        ))}
      </div>

It will show you the state data on app UI.

The final code file will look like:

Src/App.js

import React, {Component} from 'react';
import "./styles.css";

class App extends Component {
  constructor() {
    super();
    this.state = {
      std: [
        {
          name: "Ali",
          rollno: "f16se163"
        },
        {
          name: "Bilal",
          rollno: "f16sw159"
        },
        {
          name: "Sahil",
          rollno: "f16sw179"
        }
      ]
    };
  }
  render() {
    return (
      <div>
        {this.state.std.map(student => (
          <h1 key={student.rollno}>
          Student Name: {student.name}
          </h1>
        ))}
      </div>
    );
  }
}

export default App;

Output

Handle states in Functional Component

You are in your src/App.js file.

Step 01 : import the required module and files.

The useState is used to initialize the state in the functional Component.

The styles.css links to the file for giving the styles to app UI.

import React, {useState } from 'react';
import './styles.css';

Step 02: To create a state in functional Component, you need to create a functional Component first. That will render the react components. The syntax for creating functional Component in react is:

const App = () => {
  
  return (
);
}
export default App;

Step 03: Now, initialize the state in functional component.

const [std] = useState([
      {
        name: "Ali",
        rollno: "f16se163"
      },
      {
        name: "Bilal",
        rollno: "f16sw159"
      },
      {
        name: "Sahil",
        rollno: "f16sw179"
      }
    
  ],);

Step 04: You have initialized state now, render the components to see the result on your app UI.

<div>
      
    {std.map(student => (
      <React.Fragment key={student.rollno}>
        <h1>
      Student Name: {student.name}
      </h1>
      </React.Fragment>
    ))}
    
  </div>

It will show you the state data on app UI.

The final code file will look like:

Src/App.js

import React, { useState } from 'react';
import './styles.css';

const App = () => {
  const [std] = useState([
      {
        name: "Ali",
        rollno: "f16se163"
      },
      {
        name: "Bilal",
        rollno: "f16sw159"
      },
      {
        name: "Sahil",
        rollno: "f16sw179"
      }
    
  ],);
  return (
    <div>
      
    {std.map(student => (
      <React.Fragment key={student.rollno}>
        <h1>
      Student Name: {student.name}
      </h1>
      </React.Fragment>
    ))}
    
  </div>
  );
}
export default App;

Output

Conclusion

In this article, we have learnt the process of handle states in React Class and functional Components. We have run an example code for both of them in order to understand the concept easily.

Additional menu

Handle states in React class Component

Src/App.js

Output

Handle states in Functional Component

Src/App.js

Output

Conclusion