React State

A state is a javascript object similar to props that have data to be used with the reactjs render. The state data is a private object and is used within components inside a class.

State allows us to create components that are dynamic and interactive. State is private, it must not be manipulated from the outside. Also, it is important to know when to use ‘state’, it is generally used with data that is bound to change. For example, when we click a toggle button it changes from ‘inactive’ to ‘active’ state. State is used only when needed, make sure it is used in render() otherwise don’t include it in the state. We do not use ‘state’ with static components. The state can only be set inside the constructor. Let’s include some code snippets to explain the same.

class Toggle extends React.Component {
constructor(value)
{
super(value);
this.state = {isToggleOn: true};
this.handleClick = this.handleClick.bind(this);
}

Binding is needed explicitly, as by default the event is not bound to the component.

Binding is needed explicitly, as by default the event is not bound to the component.

Event Handling And Manipulation Of State 

Whenever an event such as a button click or a mouse hover occurs, we need to handle these events and perform the appropriate actions. This is done using event handlers.

While State is set only once inside the constructor it can however, be manipulated through “setState” command. Whenever we call “handleclick” function based on the previous state, “isToggleOn” function is switched between “active” and “inactive” state.

handleClick()
{
this.setState(prevState =>({
isToggleOn: !prevState.isToggleOn
}));
}

The OnClick attribute specifies the function to be executed when the target element is clicked. In our example, whenever “onclick” is heard, we are telling React to transfer control to handleClick() which switches between the two states.

render()
{
return(
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON': 'OFF'}
 
);
}
}// end class

According to the React documentation state should:

Contain data that a component’s event handlers may change to trigger a UI update. In real apps this data tends to be very small and JSON-serializable. When building a stateful component, think about the minimal possible representation of its state, and only store those properties in this.state. Inside of render() simply compute any other information you need based on this state. You’ll find that thinking about and writing applications in this way tends to lead to the most correct application, since adding redundant or computed values to state means that you need to explicitly keep them in sync rather than rely on React computing them for you.

Things to keep in mind about React component state:

1. If a component has a state a default state should be providing using getInitialState()
2. State changes are typically how you start the re-rendering of a component and all sub components (i.e., children, grandchildren, great grand chidlren etc…).
3. You inform a component of a state change by using this.setState() to set a new state.
4. A state change merges new data with old data that is already contained in the state (i.e., this.state)
5. A state change, internally deals with calling re-renders. You should never have to call this.render() directly.
6. The state object should only contain the minimal amount of data needed for the UI. Don’t place computed data, other React components, or props in the state object.

Example

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
		
      this.state = {
         header: "Header from state...",
         content: "Content from state..."
      }
   }
   render() {
      return (
         <div>
            <h1>{this.state.header}</h1>
            <h2>{this.state.content}</h2>
         </div>
      );
   }
}
export default App;