Hey, everyone, welcome to a new post into React Js Series. Today, we learn all about React State I suggest you read the previous videos on the React Js components and props to get a better understanding of the state.

What exactly is a state in React Js

So let’s begin and learn what exactly is a state in React Js.

  • Typically a state is an object that stores the values of properties belonging to a component. Now, these values can change over a period of time, either via user interactions or network changes and state helps facilitate this functionality.
  • Every time the state changes, React Js re-renders the Component to the browser, the state is initialized in the constructor.
  • A state can also store multiple properties. A method called setState() is used to update the value of the state object
  • This function performs a shallow march on the new and the previous state convention to be a shallow merge and shows that the previous state values are overridden by the new state values.

What is the difference between state and props?

In our previous post, we learned about props, and although props and state dictate and control the behavior of a component. They have significant differences. So let’s go ahead and read the comparison between the two.

  1. Firstly, props in a Component  are used to pass data and event handler to its children. While state, on the other hand, is used to store the data that has to be rendered on the webpage.
  2. Props are immutable, one set by the parent they cannot be changed. state holds volatile data and can be changed over time.
  3. Props can be used in functional and class Components. While state is restricted to class Components.
  4. Props are set by the parent competent for the child competent , while a state is generally updated by event handlers.

Now that we’ve learned all about state, let’s go ahead and build an application to see the working of state. So in my code editor that is VS Code, I’ve created a application let say “My App”.

here in my source folder, I have my app.js

1

import logo from './logo.svg';
import './App.css';

function App() {
return (
<div>
<h1>React Js Tutorial</h1>
</div>
);
}

export default App;

So let’s create a class component say Myclasscomp.js .Let’s display a message “Hello Student, welcome to React Js Tutorial”.

import React, { Component } from "react";

class Myclasscomp extends Component {
render() {
return <h2>Hello Student,welcome to React Js Tutorial
</h2>
}
}
export default Myclasscomp;

Let’s follow the JSX conventions and enclose all the HTML tag within the <div> tag.

import React, { Component } from "react";


class Myclasscomp extends Component {
render() {
return <div>
<h2>Hello Student,welcome to React Js Tutorial</h2>
</div>
}
}
export default Myclasscomp;

To give you an insight into what we’re doing.

I’m going to make use of a button ,Every time the user clicks on the button, the value gets incremented. So for this, I’m going to use a variable count and I’m going to use the concept of states. So let’s go ahead and define our variable count and initialize it to zero.

And as mentioned earlier, we initialize the state object in a constructor. Now, in the state object, we initialize a property.

let’s define the count variable, in the render method so every time we click on a button, the count value has to get incremented by 1.

so we make use of an event called onclick. So every time the button gets clicked, incrementcount method is called.

import React, { Component } from "react";

class Mycounter extends Component {
    constructor(props) {
        super(props);
        this.state = {
            counter: 0,
        };
    }
    incrementcount = () => { this.setState({ counter : this.state.counter + 1 } )}
    render() {
        const { counter } = this.state;
        return <span><button onClick={this.incrementcount}>Touch Me-{counter} times</button></span>
    }
}

export default Mycounter;

and let’s see the browser.
2
Now a setstate can be updated in response to even handler and server responses or props changes. Now all the updates can be done using the setstate() method. This is a general trend that’s used by the method.

  • The setState() method conventionally enqueues all the updates made to the components state and instructs react to re-render the component and its children with the updated state.

Thanks for reading

The post State ,State vs Props and SetState In ReactJS appeared first on Software Development | Programming Tutorials.



Read More Articles