React Props | A way to pass data to child component

Hello Friends,

In this post, we will look at How we can use React Props to pass data in the functional component?

In the last post we have learned how we can create new React component and use it to render some html. We also looked about JSX. We also tried to add some data and render that on UI. Here is that post link.

Create your first React Component and understanding JSX – CodeLila

Inside this article:

• Introduction
• Building and passing data to react component
• Using React Props to access the data

Introduction

If you will look carefully , the React function components are simple function. now, if this is a function , we can pass parameters to that and use that parameters inside that component.

Lets assume we have a requirement of building an account admin dashboard and admin want to see the employee name with salary on UI. Lets add that component.

Now, Lets modify the component code so that it can display employee name and salary. Here is the updated code with some dummy data.

Lets update the App component to display the current one. We need to import the Employee component and then add that in return statement as below.

Building and passing data to react component

The question here is how we can pass the employee detail from App component to Employee component. To pass data from one component to another we can take help of attributes which is more famous with name of properties or props in React world. Lets update the App component to pass the data.

In the above code we have create a employee array which is holding different employee details. Lets assume that this data we are getting from some services or some external sources.

Now, take a look of the return statement with Employee Tag. here we have added name and salary as attribute and passing the employee array first object name and salary detail to it.

Lets see what we are getting as output on browser.

We are getting some error on browser and the reason of that is we have not updated the Employee component to receive those values. Lets do that.

Using React Props to access the data

Now with above updated component code , we are seeing the correct values on browser. here we have updated the component to accept the all passing attributes in an object and we named it as props. The props name is not fixed name, we can name it anything which we like but most of the time , we use props as name due to convention.

now that props object is receiving the values which we are passing from App component. so we are extracting those values using props.name and props.salary , and this is dynamic data so we put them inside the curly brackets { } .

Now lets display another employee details too. To display another employee details we can add Employee tag with different dynamic data as below.

So these were the simple steps to pass data using props.

In the above post I tried to answer the questions like:-

How do you pass data through props in React?

How do you pass data through props in React to a functional component?

Do you use any different way to pass data from parent to child function components? let me know 🙂

If you want to read more about react props, you can visit to official react site here.

Thanks and Happy Learning :). Please give your valuable feedback and share this post.