I believe you landed on this article because you have probably started learning React Js or you want to hone your skills in it. Whatever the case, let us get started. React js has a different approach compared to the other JavaScript frameworks when transferring data from one component to the other. Props come in handy to provide a gateway to send data from one component to another. To get a better understanding of how props work in react, you need a good grasp of how components work in general first. I suggest you watch my tutorial on getting with react js on my YouTube channel. Link below.
(https://www.youtube.com/watch?v=8sZGbdE7IZc&t=370s)
What is/are props.
Props stand for properties. They are arguments passed to react components via HTML attributes.
React Props are like function arguments in JavaScript and attributes in HTML.
Let's use a link tag in HTML for instance
<a href = "/home" />
href is the attribute, the value is the data wrapped in by the quotation marks.
So basically, a prop is a special keyword in React that is being used to send data from one component to another.
One important thing to note is, data passed via props is uni-directional only. (from parent component to child component)
Also, the data received by the child component from the parent component is read-only. The data should never be changed inside the child component.
How to use props
- Firstly, define an attribute and its value(data)
- Then pass it to child component(s) by using Props
3 .Finally, render the Props Data
Create two components and name them by ParentComp.js and ChildComp.js
Below is my Parent Component and a nested child component
`import ChildComp from "./ChildComp"
function ParentComp( ) {
return (
<div>
<h1>I am the parent component</h1>
<ChildComp />
</div>
)
}
export default ParentComp`
Below is our child component
function ChildComp() {
return (
<div>
<h2>I will receive data from my parent soon</h2>
</div>
)
}
That was a very good affirmation from our child component though😂
Now that is rendered. Lets open our browser and see fireworks.
We can render our child component multiple times by just duplicating the codes a couple of times.
`function ParentComp( ) {
return (
<div>
<h1>I am the parent component</h1>
<ChildComp />
<ChildComp />
<ChildComp />
</div>
)
}`
This is what we will see displayed on the screen
The problem now is what if we want to have dynamic outputs?
This is because, each of the child components may have different data. This issue can be solved by our good friend props. Lets see how🙌
With regards to the html link example i stated earlier on which is
<a href="www.twitter.com">Click and start tweeting</a>
In the case of React js. We can also do the same by wrapping the values with interpolation{}
<ChildComp attribute = {value} />
We can have many attributes and assign them to their respective values in the tag.
So now let us see a typical example.
In our parent component, lets us serve some dynamic data to our child component because remember our child component gave an affirmation that it will be receiving data from the parent component soon🤣😂 So lets make that happened.
`function ParentComp( ) {
return (
<div>
<h1>I am the parent component</h1>
<ChildComp passion = {'I love Coding to the fullest'} />
</div>
)
}
Lets see how we can receive such data in our child component
function ChildComp( props ) {
return (
<div>
<h2>{props.passion}</h2>
</div>
)
}
Make sure you state the props keyward in the function parameter.
.
Alternatively, we could also send the data by wrapping our values in a quotation mark.
`
function ParentComp( ) {
return (
<div>
<h1>I am the parent component</h1>
<ChildComp name = "Alex" proffession = "Software Enginner" />
</div>
)
}
`
Lets us now see how we can receive the data in our child component
Recap:
- Props stand for properties and is a special keyword in React
- Props are being passed to components like function arguments
- Props can only be passed to components in one way (parent to child)
- Props data is immutable (read-only)
Getting a good grasp on props is a very crucial when using react js to build applications.
I hope you enjoyed this content?😘😍
Please kindly leave a comment below and let me know what's on your mind about the content. 🤷♂️ Thank you
Top comments (5)
Hello Thanks for the awesome feedback... All the points ypu raised are actuall very true just that I decided to keep the blog short and simple. You also made mention of the props being passed to the components are immutable which I included in the post. Maybe you have to read again. In my post, i said the props passed down from the parent component to the child components cannot be changed or mutated.
Thank you for proviving me the link to the editor guide.. Will check it out asap.
Absolutely cheers 🥂
@lukeshiru please have a sneak peek of the screenshot
Great post
@hash_code thanks you for the feedback