Understanding the React JS – State

In earlier chapters, we’ve mostly dealt with React components that do not require state management. This article’s main focus is on the React JS – State, its management, and components that utilize it to React.

Recap:

  • In Chapter One, get introduced to React with features. If you are new to React or need a gentle introduction to the REact features that are most frequently used throughout articles, review chapter one.
  • In Chapter Two, we introduced you to React components. They are simply building blocks of any React Application you will build. Review these articles if you are not yet comfortable with React components and then head back here for a neat and better understanding of React JS – State.

What is the State?

A state is a JavaScript object that stores dynamic data of the components and determines the behavior component. It enables a component to stay track of adjusting information in between renders and for it to be dynamic and interactive.


A state is often using within an only class component. The React JS – State is analogous to props but unlike props, it’s private to a component and is controls by the said component. In the examples from previous chapters, the behavior of components has primarily depended on the props that are passed down to them. In those cases, the components that receive the props haven’t any control over them because props are read-only.

The React JS – State is the place where the info comes from. we should always attempt to make our state as simple as possible and minimize the number of stateful components. If we’ve, for instance, ten components that require data from the state, we should always create one container component which will keep the state for all of them.

Adding State to a Class Component

output of code

code //

class Monkelite extends React.Component {
constructor(props) {
super(props);
// Define your state object here
this.state = {
name: ‘Monkelite’
}
}
render(){
returnWelcome to { this.state.name };
}
}

ouput ——->>>

Passing props is not necessary unless you are making use of them in the class component. From the Monkelite component above, it’s not necessary to pass props to either the constructor or super(), the component can be written like so :

class Monkelite extends React.Component {
  constructor() {
    super();
    // Define your state object here
  }
  // Define your render method here
}

The state is initiated using this.state and all subsequent changes to state are made using this.setState function. Using this.setState ensures that the components affected by the change in the state are re-rendered in the browser.

Rendering the data from state

To render the date of the state, a Card presentation component is defined with the functionality to display the name and age from the props passed to it as shown below.

const Card = props =>
  <div className=”col-md-6 col-lg-3">
    <div className=”card mb-3">
      <div className=”card-body”>
        <p className=”card-title”>
          <span>Name: </span>{props.info.name}
        </p>
        <p className=”card-text”>
          <span>Age: </span>{props.info.age}
        </p>
      </div>
   </div>
 </div>;

We have to add the above card component to index.js file. To display the data in the state, we need to access the data array using this.state.data and then use JavaScript’s map function to loop through the array so each of its elements is rendered on the page.

<div className=”row”>
  {
    this.state.data.map(info => <Card info={info}/>)
  }
</div>

The statement containing the Card component is set within a Bootstrap row so that it is displayed within the Bootstrap clip and placed just after the second <hr/> within the class component’s render function.

React props vs state

Should I use props or state in react application? What impact do they have? What is the difference between them?

Props help us to create Stateless components which are dumb UI components. The state is used to create Container Components or Stateful Components that perform additional data manipulation, backend development & validation which is then passes to Dumb UI components or Stateless Components to a client-side.

Props are set by the parent component while the State is generally updates by event handlers and set in constructor()

  • As mentioned above, if we want to share the state of a component, we must pass it as props to the component, hence props are always set by parent component which is then used by the child components
  • State of a component generally changes as and when a particular event is on like onHandleChange () etc.

Conclusion of the above discussion :

We present here an final conclusion which helps you to choose out better option

  • The state can only use within the Class Components
  • State can be modified using setState() method
  • Props are pass as attributes from parent to child component
  • Also, Props value must never be modified, can cause an error during further development
  • Props are often used with both Class also as Function Components
  • Props name must follow a camelCase format
  • Always have a minimum number of Stateful Components for a better performance boost

While in this article is far from a full React guideline, I wanted to introduce the central pillars of React and to inspire you to try and helps you to write a simple code from scratch using the library.


From my experience, creating something on your own and getting your hands dirty is the best way to learn anything.

If you’ve enjoyed this article, please show some love by sharing it with others. Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *