How to work with State and manipulate it in React ?

Components in React provide the JSX which is similar to HTML. So, in this article, we will see how to work with State and manipulate it in React.

How to work with State and manipulate it in React?

Components can contain HTML tags and javascript expressions, ReactDOM somehow processes it. Everything works fine until you only have to display static content. But what if your website is dynamic and you have to change something on the frontend, based on user interaction. In this case, you can use something like events and event handler. It will interact with the user. But how would you go to tell ReactDOM that displays something based on changes that occurred due to user interaction?

The way to re-render a component with ReactDOM is via a state change. It is a built-in object in react components. It has some predefined functionalities and contains some information about the UI.  Also, it controls the whole behavior of a component. We can make use of the state object to throw information on components. So, ReactDOM will render something according to that information. Basically, it is a dynamic data storage for components. We can also internally manage the state for different purposes. Change in state forces React to call render function.

Creating react app and installing module:

1) Creating React Application

npx create-react-app state-demo

2) After creating your project folder i.e. foldername, move to it using the following command:

cd state-demo

Initializing state:

• Initialize state object inside the constructor

constructor() {
super(); // Don’t Forget to pass props if received
this.state = {
// Any object
};
}

• Initialize state object using class property

class MyComponent extends React.Component {
state = {
// any object
};
}

Accessing State:

We can access state objects anywhere in the component with “this.state”, the state is local so, don’t try to access it from an outside component, if you need it outside then somehow you can pass it as props.

Manipulating State:

The class component provides us a setState function we can call it anywhere in the component to manipulate state.

• Changing state object with a provided object as an argument while calling setState.

this.setState({
// anyobject
});

• When we have to update based on the previous state we pass a function that gets the previous state as a parameter.

this.setState((prevState) => {
// Do return a new state object 
// after some manipulations 
});

• setState actions are asynchronous, so when we have to do something (ex- fetching dynamic content, changing component internally, etc) strictly after the state has been updated we pass a callback function as a second argument to setState function.

Example:

In this example, we are printing a line to indicate that the callback function gets executed just after the state updates. This can be used when we have to perform some execution strictly after state updates. A simple use case for this scenario can be fetching any dynamic content through API. That is when we click on the algorithms section from the homepage of the website it fetches the list of all topics. This can be done by GET request inside the callback function of setState.

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';

function MyComponent (){
  const [state, setState] = useState({clicked:0});

  const stateManipulater = ()=>{
    setState((prevState)=>{
      return {clicked:prevState.clicked+1};
    })
  }
  useEffect(()=>{ 
    console.log("This line will only get "
    + "printed after state gets updated"); 
  }, [state])

  return <div><h3>Illustration of Working with State!</h3> 
    <p>
      This Button is associated with an integer
      state which increments on click and UI 
      re-renders accordingly 
    </p>

    <button onClick={stateManipulater} > 
    {`Clicked ${state.clicked} Times`} </button>
  </div>
}

ReactDOM.render(
  <MyComponent/>, // What to Display
  document.getElementById('root') // Where to Display
);

Run the application using the following command from the root directory of the project:

npm start

Now open your browser and go to http://localhost:3000/, you will see the output.

Points to remember while working with the state:

• Don’t ever change the State explicitly, because in this way react will not be able to observe the state changes, and the component’s behavior will not get affected, so always use the setState function provided by the component.
• As you understood that state change causes re-render of components hence always keep an eye on the places where the state is changing, sometimes little mistakes may cause extra or in the worst case infinite re-renders, which will consequently make your application slower.
• If you have multiple elements in the state object or array, and you only have to change one element then don’t forget to spread the data otherwise it will overwrite the object/array with that single element because state updates as shallow merge.
• After updating the state don’t rely on the fact that the state is surely updated, in some cases it may take a little bit of time due to the internal working of REACT, so if you have immediate use of updated state does create your own.

Conclusion:

So, in this article, we have been through how to work with State and manipulate it in React. Also, feel free to comment with your suggestions and feedback on the post. Moreover, at BOSC Tech Labs, we have a team of highly experienced React JS developers. They can assist you in developing your customized web app. So contact us to hire experienced ReactJS developers.