We will learn about state in this part, but let’s first understand the difference between state and props.
Welcome to part-5 of the series. You can find part-4 here. We will learn about state in this part, but let’s first understand the difference between state and props.
Since, react have two important concepts. One been props and other been state, they are compared a lot. And also differentiated a lot. Below diagram show the difference between them.
props vs state
As, per the above diagram state is managed within a component. So, we will first create a state variable. Create a new file Counter.js inside the component folder. It is a class based component and we have the class constructor in it. The state variable is declared with this.state inside a constructor and is an object. We can put any numbers of key-value pair in it.
We are declaring count inside the state variable, with the initial value of 0. Now, inside our render() method we access it by this.state.count.
Now, in localhost it will show the initial value.
Now, whenever we want to change the value of state, we do it thorough setState method. We have added a button and a onClick event to it. Next, we are calling *incrementCount *function.
On important thing to notice is that at line 9, we are using the bind. This is done because the this keyword will throw error, if we don’t give it.
Inside the *incrementCount *function, we are calling the this.setState and increasing the count value.
Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.
Are you looking to [hire React JS developer](https://www.mobiwebtech.com/react-js-development-company/ "hire React JS developer") from a prestigious and reliable React JS development company? Visit at Mobiweb Technologies here we have a big team...
Hire ReactJS developers from a Top ReactJS Development Company in USA to developing User Interfaces on ReactJS framework.
Are you looking for some new react js to expand your skills or to explore the possibilities of react js, have a look at these projects : Project 1: Next.js React GraphQL Express Apollo Boilerplate If you are a react js developer who uses GraphQL, Next.js, Express, and Apollo regularly ( well I do ) then, give this boilerplate a go.