React: What are Props?
React deals with data flow & manipulation differently than other frameworks, this is one of the main reason’s it can be quite difficult the learn some the key concepts react has to offer such as props, state etc. Don’t let that scare you away from react! With some dedication and practice you’ll get the hang of react and see why it’ll make your life as front-end developer so much easier.
In this article we’re going to focus on the React Props feature and more importantly how to use it. Before we start with ‘props’ it’s very important that you have a general understanding of components. If you don’t know anything about components here’s an article that will get you up to speed.
What’s Props?
React makes coding easier and cleaner using components. With that being said, react is a component-based library. To get these different components communicating with each other we need to use props. ‘Props’ stands for properties, the word “props” is a special keyword in react and it’s used to pass data between components.
It’s important to know that that props can only pass data in a one way flow. This basically means it can pass data from a parent to a child but not the other way around.
How do we use props in React?
In this example, we’ll be using a ParentComponent and a ChildComponent:
Below we have the ChildComponent:
Now the problem we have here, if we call the ChildComponent many times as the following code shows:
It will always renders the same string over and over again:
I am the parent component!!!!
This is the 1st child!!!
This is the 1st child!!!
This is the 1st child!!!
This is where our friend “props” comes to the rescue. Helping us get a dynamic output from each child component so each piece of data is different.
How to get it working!
First we want to define our own attributes and assign values with interpolation { }
So basically all you need to do is declare a “text” attribute to the ChildComponent than assign it to a string value: “This is the 1st child!!!”
Now we can use props!!!
Second step is passing the data using props. Now we can take the “This is the first child!!!” string and pass it by using props. Passing props is very simple. We pass props into a React component and props bring all the necessary data.
Our Final step Is rendering the props data. We’ve done good so far, we created an attribute and its value. We also passed it through props. We can’t see it yet because it still has not been rendered. Let’s take care of that now!!
It’s important to understand that props is an object. As we know in JavaScript we are able to access object elements with that dot(.)notation.
This will render our ChildComponent dynamically with the value we provided! Which will look like:
I am the parent component!!!!
This is the first child!!!
We did it! We’ve successfully rendered the data coming from the parent component. Now let’s do the same for other child components:
This will render on the page like so:
I am the parent component!!!!
This is the 1st child!!!
This is the 2nd child!!!
This is the 3rd child!!!
We’ve successfully rendered each ChildComponent with its own prop data. This is how we would be able to use Props for passing data and creating dynamic components.
