Search for a command to run...
Works on NodeJS, React, React Native and many more day in and out.
Skilled in back-end development, REST API, NodeJS, MongoDB, MySQL, React & React Native.
Connect to learn from my experience. I keep sharing them. Mostly about tech here on my LinkedIn https://www.linkedin.com/in/pratiksah/
No comments yet. Be the first to comment.
In React, managing the global state efficiently is crucial for building complex applications. While Redux has long been the go-to solution for centralized state management, React's Context API now provides a built-in mechanism for handling global sta...
React has become one of the most popular JavaScript libraries for building user interfaces. As a React developer, I often found myself spending valuable time manually creating components and managing CSS modules. The lack of consistency and repetitiv...
Recently I came across a post by the digital ocean where they introduced us to the serverless functions which they recently launched. I'm a huge fan of them in terms of simplicity and pricing. I thought of giving it a try and found it to be really e...
While handling file uploads via the form in Express, you might have tried Multer. It is good but Formidable is awesome when it comes to simplicity without having to deal with middleware. The formidable module is used for parsing both the form data an...
We all have used console.log() at some point in time but these are just for debugging purpose only. It's not recommended in a production-level app. If you'll use them in your production level app, this may not help you in finding the exact error and ...
The state is the place where we store the data. React components have state built-in. All the property values that a component has, is stored in the state. When a state object changes, the component is re-rendered.
The state is defined inside React.Component. Below code is an example of a stateful component in React.
import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
header: "Pratik",
};
}
changeHeader = () => {
this.setState({header: 'Pratik Sah'});
}
render() {
return (
<div>
<h1>{this.state.header}</h1>
<button onClick={this.changeHeader}>Change</button>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
Once the class extends Component, we need to call the super(); method inside the constructor. This helps us to call the parent's constructor.
this.state
Now we can use the state property to store our app's current state.
For example, here I tried to store header as "Pratik"
this.state = {
"header": "Pratik",
}
and in my <h1></h1> tag, I've used is to display my name.
this.state.header inside h1 tag is going to return the value of header as 'Pratik'.
After that, I've created a button to manipulate the value of the state.
On clicking the button, a function named changeHeader will be called and this will change the value inside the state with the help of setState() method. The setState method is also defined inside React.Component.
Inside the changeHeader method:
changeHeader = () => {
this.setState({header: 'Pratik Sah'});
}
Now this will change the state from 'Pratik' to 'Pratik Sah' on button click.
This is how a React state works. I hope you've understood the concept of state and setState and if you have found this post helpful, please share it with your friends.
If you stuck in any kind of error, feel free to comment your doubts in the comment section below.
If you liked this post please mark this post as Recommend by clicking the ❤️ button below in the comments section. This will help me a lot.
Thanks for your time. See you in my next post. Take care and happy coding✌️.