What is State & Props? in React JS

Props – Props are properties/arguments passed to the React JS Component/Function.,

Props values are rendered only when the page initially rendered output HTML/output.
Change in Props will not be rendered dynamically in a web page.

State – State are variables holding the state of the webpage.,
Any change in state variables are rendered to the HTML/Output page dynamically.

Lets Create a Simple ES6 React Component Class.

1. Create state variable like below.
this.state = {date:new Date()}

2. Create Props variable like below.
this.props = props;

3. Create a Simple Button, and on click of the button,
Update the timestamp values in props and state

4. Use the created Timestamp in App.JS like this.


* The new Date() value is passed as the arguement to the constructor as props.
5. In the below example, we will try to update the state and props value., on click of the button.

However we could see the state value only will be dynamically rendered in the web page.
The props value even though get updated, the React Framework will not render the value dynamically.

Timestamp.js

App.js

when we run the npm start, react components loads the props and state initially with the Date value.

Hence we could see both the values in the page as show below.

Initial Page Load

When click on the “Update State & Props” Button, only the state value will be refreshed, and not the props value.
Even though the props & state value changed, React page will not render the props in output screen.

After Click Button., State value change & props value no change

The entire source code is available in below Github repo for reference

https://github.com/TutorialFlow/State-Props-ReactJS

Leave a Comment

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