This is the net post in the rectjs series. This post is about “ReactJS state and props”. If you have not yet started to react 🙂 please go through the previous post as per below links. This is one of the important topic in this series.
ReactJS state and props
State is the place where the data comes from. State affects how a component behaves and renders. You can use states with props (properties) , to share the data.When React gets a component, it passes JSX attributes to this component as a single object. We call this object “props” or “properties”.
Practicals
I believe in practicals more than theories. Let’s jump on to see a quick example. Hope this will make it more understandable.To make it work you can refer to the previous post (#3) at the top. You can download the example file there. We will be using the same files in this and future posts as well. May be you want to keep them handy. If you have issues setting up the environment or making the code work for you, please comment on any post and I should be able to help.
You can replace the content on the app.jsx file to the below and you can see the change when you open the index.html in the browser.
import React from ‘react’;
class App extends React.Component {
constructor() {
super();
this.state = {
header: “ReactJS State and Props”,
content: ” Content section here…”
}
}
render() {
return (
<div className=”row”>
<div className=”col-xs-6 col-sm-4″><center> <h1>{this.state.header}</h1> </center></div>
<div className=”col-xs-6 col-sm-4″><h3>From APP State</h3></div>
<div className=”col-xs-6 col-sm-4″> <h2>{this.state.content}</h2></div>
</div>
);
}
}
export default App;
Let’s see what these code means. If you see the method constructor() , this add the references to constructor. By using “this” we are referencing the instance of the app. The object gives us access to the properties of the state. So, this.state represents a state of the component. And the state has two properties here, which are “header” and “content”. We have assigned some text to these two and returning these properties to the calling app. We have accessed the value of these properties in the return method by using the .(dot) notation (e.x. this.state.header)
You can write these and various other ways using the properties, which will produce the same results every time. But they are more granular and object oriented.
The properties are not changeable directly all the time. That’s why we need to use state to make them available for updates. Look at the below code. This time we will make changes in two files. Note : “props” is a key word. If you change it, you will not get the output you want.
App,jsx
import React from ‘react’;
class App extends React.Component {
render() {
return (
<div>
<h1>{this.props.headerText}</h1>
<h2>{this.props.contentText}</h2>
</div>
);
}
}
export default App;
main.js
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import AppComponent from ‘./App.jsx’;
ReactDOM.render(<AppComponent headerText=”this is header” contentText=”This is content”/>, document.getElementById(‘app’));
Loot at the above code, what they are doing now. Our app.jsx component is having two properties “headerText” and “contentText”. They are accessed by the caller, here the main.js and passed some values which will get rendered on the screen. The output will be as below:
Now lets make another small changes to these two files:
App,jsx
import React from ‘react’;
class App extends React.Component {
render() {
return (
<div>
<h1>{this.props.headerText}</h1>
<h2>{this.props.contentText}</h2>
</div>
);
}
}
App.defaultProps = {
headerText: “this is header”,
contentText:”This is content”
}
export default App;
main.js
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import AppComponent from ‘./App.jsx’;
ReactDOM.render(<AppComponent />, document.getElementById(‘app’));
Note the changes, we have added a defaultProps to the apps.jsx component. This will be returning the properties values if the caller does not specify or assign anything to the props. Also we have removed the props assignment from the main.js. The output will be exactly the same as above. Here we used default properties of the component. Note here “defaultProps” is a key word. Let e remind you that you have to be very careful as jsx is case sensitive.
Now, let’s modify the two files again to make it more interesting. Hope you will enjoy it:
app.jsx
import React from ‘react’;
class App extends React.Component {
render() {
return (
<div>
<h1>{this.props.headerProp}</h1>
<h2> {this.props.contentProp}</h2>
<Header />
<Content contentChild= {this.props.contentProp} />
</div>
);
}
}
class Header extends React.Component {
render() {
return (
<div>
<h1>This is test child header</h1>
</div>
);
}
}
class Content extends React.Component {
render() {
return (
<div>
<h2>{this.props.contentChild}</h2>
</div>
);
}
}
App.defaultProps = {
headerProp: “Default header”,
contentProp: “Default Content”
}
export default App;
main.js
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import AppComponent from ‘./App.jsx’;
ReactDOM.render(<AppComponent contentProp=”This is set by caller”/>, document.getElementById(‘app’));
Let’s see what we did in the above code ! We created two more components called “header” and “Content”. “Header” does not have any properties, so it is straightforward. Whenever it is called it will render as is. But if you see “content” , it has a property called “contentChild” . The property can be set in various ways. We have used here the caller main.js file to pass the value. If you see we have passed only one of the property to the app component (the parent component in this case) so the second property is coming from the defaultProps. The output in this case is as below.
Conclusion
This is the end of this post. We have a fair idea about the “ReactJS state and props”, I hope. Would love to hear about your thoughts if any. Please add comments for interactions. I have said it once in somepost, but saying it again here… I am learning about these things I write and hoping I am most accurate when explaining things. But in case you see anything wrongly stated here, please feel free to discuss here, we will both learn something for sure.
I hope to cover the concept of ReactJS state and props here in a simple way. Next post will be about
Keep reading .. and sharing… sharing is learning… 🙂 bye bye till the next post.
Reference from facebook reactjs page
Leave a Reply