Cloud Hosting

React has a different approach to data flow and manipulation than other frameworks, and thats why it can be difficult in the beginning to understand concepts like props, state and others.

Props is a special keyword in React that stands for properties and is used for passing data from one component to another. Data with props are passed in a unidirectional flow from parent to child.

Were going to focus on Reacts Props feature and how to use it. Props is a special keyword in React that stands for properties, and its used for passing data from one component to another.

To understand how props work, first, you need to have a general understanding of the concept of React components. Well cover that and more in this article.

React is a component-based library that divides the UI into little reusable pieces. In some cases, those components need to communicate or send data to each other, and the way to pass data between components is by using props.

As I shared, props is a keyword in React that passes data from one component to another. But the important part here is that data with props are being passed in a unidirectional flow. This means its passed one way from parent to child.

Props data is read-only, which means that data coming from the parent shouldnt be changed by child components.

Now, lets see how to use props with an example.

An error occurred.

More on ReactA Guide to React Hooks With Examples

I will be explaining how to use props step-by-step. There are three steps to using Reactprops:

In this example, we have a ParentComponent including another ChildComponent:

And this is our ChildComponent:

The problem here is that when we call the ChildComponent multiple times, it renders the same string again and again:

But what we like to do here is to get dynamic outputs, because each child component may have different data. Lets see how we can solve this issue by using props.

We already know that we can assign attributes and values to HTML tags:

Likewise, we can do the same for React components. We can define our own attributes and assign values with interpolation { }:

Here, Im declaring a textattribute to the ChildComponent and then assign a string value: Im the 1st child.

Now, the ChildComponent has a property and a value. Next, we need to pass it via props.

Lets take the Im the 1st child! string and pass it by using props.

Passing props is very simple. Just as we pass arguments to a function, we pass props into a React component and props brings all the necessary data.Arguments passed to a function:

Arguments passed to a React component:

Weve created an attribute and its value, then we passed it through props, but we still cant see it because we havent rendered it yet.

A prop is an object. In the final step, we will render the props object by using string interpolation:{props}.

But first, log props to console and see what it shows:

As you can see, props returns an object. In JavaScript, we can access object elements with dot notation. So, lets render our text property with an interpolation:

And thats it. Weve rendered the data coming from the parent component.Before closing, lets do the same for other child components:

As we can see, each ChildComponent renders its own prop data. This is how you can use props for passing data and converting static components into dynamic ones.

More on ReactHow to Make API Calls in React With Examples

To recap:

Understanding Reacts approach to data manipulation takes time. I hope my post helps you to become better at React.

View post:

React Props Explained With Examples - Built In