How the Props (Properties) system works in React.js?

How to use Components in React.js?»

React uses an inheritance system called the props. In the app you’re building, you have a component called App() component. Under this component, there are three more components named NewsSection. The App() component is called a parent component while the NewsSection component here is called a child component. You can pass some configuration from the parent component to the child components with the help of props. However, the reverse is not true. You cannot directly pass data from the child to the parent component directly. There are indirect ways for that.You can provide props from the parent to child component in the following way. In the above example, let’s say you want to provide a custom news title instead of “Some news title here”:

In the index.js file, you need to make the following changes wherever you called <NewsSection/> :

<NewsSection newsTitle=“Earthquake hits Tokyo with 6.5, 14 dead, 5 injured”/>

Here, newsTitle is the property name and “Earthquake hits Tokyo with 6.5, 14 dead, 5 injured” is the value of the property. This information will be shown inside the NewsSection.

Here you’d notice you’ve provided some hardcoded value to the newstitle attribute. If you wish, you can also provide some javascript variable here. For example:

var newsTitle1 = “Earthquake hits Tokyo with 6.5, 14 dead, 5 injured”
...
<NewsSection newsTitle = {newsTitle1} />
…

For now, you can just hardcode it to keep it simple.

Next, you can add two more news titles to the remaining NewsSection components inside index.js file as follows:

import React from 'react';
import ReactDOM from 'react-dom';
import NewsSection from './NewsSection';

const App = () => {
return (
<div className="container">
<NewsSection newsTitle="Earthquake hits Tokyo with 6.5, 14 dead, 5 injured"/>
<NewsSection newsTitle="Iran dismisses possibility of conflict in War"/>
<NewsSection newsTitle="Top 10 benefits of eating Apples in morning"/>
</div>
);
};

ReactDOM.render(<App/>, document.querySelector("#root"));

Once you’ve provided some additional information to the child component, the parent component needs to consume it. So, go to NewsSection.js file and pass the argument props as a single argument. And before the return() statement, add console.log(props) to print what props contain in the console window of the browser as follows (I’m ignoring existing code inside return statement here):

import React from 'react';
import faker from 'faker';

const NewsSection = (props) => {
console.log(props);
return (
...
);
};

export default NewsSection;

Now, inside your browser window, open up the Console tab by pressing Ctrl + Shift + K and you should see something like this:

Props in Reactjs

These are the three Javascript objects you passed from the NewsSection child components. It also means, you can access the object values by using props.newsTitle inside NewsSection.js. To do that, you just have to replace <h2>Some news title here</h2> with <h2> { props.newsTitle } </h2> as follows:

import React from 'react';
import faker from 'faker';

const NewsSection = (props) => {
return (
<div className="row">
<div className="col-md-8">
<div className="news-title">
<h2>{ props.newsTitle }</h2>
</div>
<div className="publishdate">
<p>
May 12, 2019
</p>
</div>
<div className="news">
<p>
Lorem Ipsum ...
</p>
</div>
</div>
<div className="col-md-4">
<img alt="news" className="img-responsive" src={faker.image.city()} style={{width: '100%'}}/>
</div>
</div>
);
};

export default NewsSection;

Save the file and you should see all the news snippets in browser with newly added News titles:

Similarly, you can pass more values from the child components. Here you’re adding two more properties to the NewsSection components named newsDate and newsSummary as follows (inside index.js):

import React from 'react';
import ReactDOM from 'react-dom';
import NewsSection from './NewsSection';

const App = () => {

return (
<div className="container">
<NewsSection newsTitle="Earthquake hits Tokyo with 6.5, 14 dead, 5 injured" newsDate="May 20 2019" newsSummary="News summary 1"/>
<NewsSection newsTitle="Iran dismisses possibility of conflict in War" newsDate="May 19 2019" newsSummary="News summary 2"/>
<NewsSection newsTitle="Top 10 benefits of eating Apples in morning" newsDate="May 18 2019" newsSummary="News summary 3"/>
</div>
);
};

ReactDOM.render(<App/>, document.querySelector("#root"));

Save the file and use these passed properties inside NewsSection.js as follows:

import React from 'react';
import faker from 'faker';

const NewsSection = (props) => {
return (
<div className="row">
<div className="col-md-8">
<div className="news-title">
<h2>{ props.newsTitle }</h2>
</div>
<div className="publishdate">
<p>
{ props.newsDate }
</p>
</div>
<div className="news">
<p>
{ props.newsSummary }
</p>
</div>
</div>
<div className="col-md-4">
<img alt="news" className="img-responsive" src={faker.image.city()} style={{width: '100%'}}/>
</div>
</div>
);
};

export default NewsSection;

Leave a Comment