{"id":15828,"date":"2022-12-26T12:00:39","date_gmt":"2022-12-26T06:30:39","guid":{"rendered":"https:\/\/www.guvi.in\/blog\/?p=15828"},"modified":"2025-10-07T12:58:17","modified_gmt":"2025-10-07T07:28:17","slug":"how-to-use-props-in-react","status":"publish","type":"post","link":"https:\/\/www.guvi.in\/blog\/how-to-use-props-in-react\/","title":{"rendered":"How to use Props in React [in 3 simple steps]"},"content":{"rendered":"\n

In this blog, we\u2019ll learn what are props in react and how we can use them in our application to use dynamic data. We\u2019ll also learn about props syntax, the different ways to pass props and the setting up of the default value of props.<\/p>\n\n\n\n

React<\/a> – A very popular framework for developing beautiful UI web applications. It is an open-source library developed by Facebook and a commonly used library. It is a JavaScript-based library that consists of multiple extensions for the entire application.<\/p>\n\n\n\n

With the help of React, we can create dynamic applications, as it needs less code and gives more functionality. Not only this, it also provides a dedicated tool for debugging the application to find errors or bugs. <\/p>\n\n\n\n

As react allows us to create dynamic web apps therefore we can pass different data to the components with the help of props. Props are used in passing data from one react component to another component. In simple terms, it is how an app shares data across different parts or components of the application. <\/p>\n\n\n\n\n\n

Pre-requisites<\/strong><\/h2>\n\n\n\n

Before moving on to learning about react props, make sure to create a react application project so that we can use props. We have already explained how to create a new react application in one of our blogs. Learn more<\/a>.<\/p>\n\n\n\n

Before diving into the next section, ensure you’re solid on full-stack development essentials like front-end frameworks, back-end technologies, and database management. If you are looking for a detailed Full Stack Development career program, you can join HCL GUVI\u2019s Full Stack Development Career Program<\/a><\/strong> with Placement Assistance. You will be able to master the MERN stack<\/a> (MongoDB, Express.js, React, Node.js) and build real-life projects.<\/p>\n\n\n\n

Additionally, if you want to explore ReactJS through a self-paced course, try HCL <\/a>GUVI\u2019s ReactJS self-paced certification course.<\/a><\/strong><\/p>\n\n\n\n

What are Props in React?<\/strong><\/h2>\n\n\n\n

Props or properties in react are a functional argument by which different components communicate with each other. Props is just a data\/information that allows us to pass in JSX tags. With the help of props, we can pass values like JavaScript objects, arrays or functions, etc. <\/p>\n\n\n\n

Props are passed from a parent component to the child component. Now, if you haven\u2019t understood props yet, it allows us to reuse a component logic dynamically which means that the data or information in the component will not be static. We\u2019ll understand this with the help of an example later on. <\/p>\n\n\n\n

Props Syntax<\/strong><\/h2>\n\n\n\n

We can use the react props in two different ways and both have their own different syntaxes. The two ways of using props in react app are:<\/p>\n\n\n\n

Without destructuring:<\/strong><\/h3>\n\n\n\n

The syntax of defining props without destructuring is given below.<\/p>\n\n\n\n

function Course(props) {\n    <div>{props.courseName}<\/div>\n}\n<\/code><\/pre>\n\n\n\n
With destructuring:<\/strong><\/h3>\n\n\n\n
The syntax of defining props as a destructuring argument is given below.<\/p>\n\n\n\n
function Course({courseName}) {\n    <div>{courseName}<\/div>\n}\n<\/code><\/pre>\n\n\n\n
The detailed working of both the given methods is explained below in this blog.<\/p>\n\n\n\n
How to use Props in React?<\/strong><\/h2>\n\n\n\n
Now let\u2019s see a full example and understand how we can use props in a react app. Props are very easy to understand. In this example, we\u2019ll need two things: first one is the main function component (App.js)<\/strong> and a second component (Course) <\/strong>which we is going to render in our App.js component.<\/p>\n\n\n\n
App.js Component File:<\/strong><\/h3>\n\n\n\n
This is the App component (parent) which is the main file of a React application and in this component, we\u2019ll be rendering our second component i.e., Course component which acts as a child component in which we\u2019ll be passing props.<\/p>\n\n\n\n
\nimport React from \"react\";\n\nfunction App() {\n\n  return (\n    <div>\n\t<h1>Guvi Courses<\/h1>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n
Course component<\/strong><\/h3>\n\n\n\n
This component will have a prop called courseName <\/em><\/strong>which will get its value dynamically after rendering inside the App.js component.<\/p>\n\n\n\n
function Course(props) {\n  return (\n    <div>\n      <ul>\n        <li>{props.courseName}<\/li>\n      <\/ul>\n    <\/div>\n  )\n}\n<\/code><\/pre>\n\n\n\n
Now render the Course<\/strong> component into the App component to pass the props. Finally your App.js file should look like below:<\/p>\n\n\n\n
import React from \"react\";\n\nfunction Course(props) {\n  return (\n    <div>\n      <ul>\n        <li>{props.courseName}<\/li>\n      <\/ul>\n    <\/div>\n  )\n}\n\nfunction App() {\n\n  return (\n    <div>\n      <h1>Guvi Courses<\/h1>\n      <Course courseName=\"Full Stack Development\"  \/>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n
In the above code, first we have accessed the information from props in the <li\/> element and then after that we are passing a prop called “courseName” in our <Course \/> component reading the value of the prop as “Full Stack Development”.<\/p>\n\n\n\n
Different ways of using props in react<\/strong><\/h2>\n\n\n\n
Till now we have understood the basic syntax of using props in react and now we\u2019ll learn what are the ways through which we can use props in a react app. So, there are two ways of using props and those are discussed in detail below.<\/p>\n\n\n\n
1. using Props without Destructuring<\/strong><\/h3>\n\n\n\n
The First way of using props is to use them without destructuring. When using props without destructuring we pass an argument known as props <\/strong>in the function. Let\u2019s understand it step by step with the help of an example.<\/p>\n\n\n\n
Step 1: Pass “props” as argument in function<\/strong><\/h3>\n\n\n\n
To use props, we first pass the \u201cprops\u201d keyword as an argument into our function which can be seen as follows.<\/p>\n\n\n\n
function Course(props) {\n\t\u2026\n}\n<\/code><\/pre>\n\n\n\n
Step 2: Using variables directly in JSX template<\/strong><\/h3>\n\n\n\n
Here we are not declaring the variables before rather we are using them directly into our JSX template i.e., into our <li> element.<\/p>\n\n\n\n
function Course(props) {\n\treturn (\n    <ul>\n       \t        <li>{props.courseName}<\/li>\n      \t    <\/ul>\n)\n}\n\nexport default Course;\n<\/code><\/pre>\n\n\n\n
Step 3: Pass data in App.js component<\/strong><\/h3>\n\n\n\n
Now our data will be passed to the main component i.e. App.js and will look like we are passing the attributes.<\/p>\n\n\n\n
function App() {\n\n  return (\n    <div className=\"container\">\n      <Course courseName=\"Full Stack Development\"  \/>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n
Styles given below are optional to use.<\/p>\n\n\n\n
\n\/\/App.css file\n\n.container {\n  margin-left: 20px;\n}\n\n.container h1 {\n  color: green\n}\n\n.container li {\n  font-size: 20px;\n}<\/code><\/pre>\n\n\n\n
Output:<\/strong><\/h3>\n\n\n\n
After passing the props, your output will look like below.<\/p>\n\n\n
\n
\"\"
Props without destructuring<\/figcaption><\/figure><\/div>\n\n\n
So, now we can use data dynamically for any component with the above method and can declare multiple props as per our requirement. Next we\u2019ll see how to use props with destructuring.<\/p>\n\n\n\n
2. using Props with Destructuring<\/strong><\/h2>\n\n\n\n
Compared to the above method (without destructuring), this is the most commonly used method to use props as it becomes very easy to modify the function and also it takes less time therefore making it as an optimized way.<\/p>\n\n\n\n
In this method, we don’t declare variables first or pass them directly to the JSX template. Instead of passing the props as an argument we destructured and passed in the variables like the function argument. Let\u2019s understand this in detail and see it step by step with the help of an example.<\/p>\n\n\n\n
Step 1: Destructuring the Course component<\/strong><\/h3>\n\n\n\n
Here we are not declaring the variables rather we are destructuring and passing the variables as function arguments. We can read these props by listing their names which are available inside ({ and }) <\/strong>directly after the Course component.<\/p>\n\n\n\n
function Course({ courseName, courseType }) {\n     return (\n       <ul>\n       \t   <li>{courseName}<\/li>\n           <li>{courseType}<\/li>\n       <\/ul>\n     )\n}\n\nexport default Course;\n<\/code><\/pre>\n\n\n\n
Step 2: Pass data in App.js component<\/strong><\/h3>\n\n\n\n
Now our data will be passed to the main component i.e. App.js and will look like we are passing the attributes.<\/p>\n\n\n\n
function App() {\n\n  return (\n    <div className=\"container\">\n      <h1>Guvi Courses<\/h1>\n      <Course courseName=\"Full Stack Development\" courseType=\"Development\" \/>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n
Output:<\/strong><\/h3>\n\n\n\n
After passing the props, your output will look like below.<\/p>\n\n\n
\n
\"\"
Props with destructuring<\/figcaption><\/figure><\/div>\n\n\n
How to specify default value of prop<\/strong><\/h2>\n\n\n\n
Sometimes, we don\u2019t want the props value to be empty or when no value is specified, at that time we can specify a default value just by destructuring and putting = <\/strong>sign and the default value right after the parameter as shown below.<\/p>\n\n\n\n
function Course({ courseName, courseType = \"development\" }) { \n     ... \n}\n<\/code><\/pre>\n\n\n\n
So, now when the <Course \/> is rendered with no course type prop, it will be automatically set to “development”.<\/p>\n\n\n\n
Kickstart your Full Stack Development journey by enrolling in HCL GUVI’s certified Full Stack Development Career Program<\/strong><\/a> with Placement Assistance<\/strong> where you will master the MERN stack (MongoDB, Express.js, React, Node.js) and build interesting real-life projects. This program is crafted by our team of experts to help you upskill and assist you in placements. <\/p>\n\n\n\n
Alternatively, if you want to explore ReactJS through a self-paced course, try HCL GUVI\u2019s ReactJS self-paced course.<\/a><\/strong><\/p>\n\n\n\n
Conclusion<\/strong><\/h2>\n\n\n\n
In this blog, we learned about props in react, how they are used, their syntax, and different ways of using props. We hope you get a better understanding of how the default value of props are set. To read props, we saw two ways i.e., with and without destructuring. To get more understanding of props, make sure to do practice of them in a project.<\/p>\n","protected":false},"excerpt":{"rendered":"
In this blog, we\u2019ll learn what are props in react and how we can use them in our application to use dynamic data. We\u2019ll also learn about props syntax, the different ways to pass props and the setting up of the default value of props. React – A very popular framework for developing beautiful UI […]<\/p>\n","protected":false},"author":1,"featured_media":15829,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[737],"tags":[803,802,804],"views":"15561","authorinfo":{"name":"GUVI Geek","url":"https:\/\/www.guvi.in\/blog\/author\/admin\/"},"thumbnailURL":"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2022\/12\/react-props-300x169.png","jetpack_featured_media_url":"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2022\/12\/react-props.png","_links":{"self":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/15828"}],"collection":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/comments?post=15828"}],"version-history":[{"count":25,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/15828\/revisions"}],"predecessor-version":[{"id":88929,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/15828\/revisions\/88929"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/media\/15829"}],"wp:attachment":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/media?parent=15828"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/categories?post=15828"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/tags?post=15828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}