How to use Props in React [in 3 simple steps]

In this blog, we’ll learn what are props in react and how we can use them in our application to use dynamic data. We’ll 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 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.

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. 

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. 

Pre-requisites

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.

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 GUVI’s Full Stack Development Career Program with Placement Assistance. You will be able to master the MERN stack (MongoDB, Express.js, React, Node.js) and build real-life projects.

Additionally, if you want to explore ReactJS through a self-paced course, try GUVI’s ReactJS self-paced certification course.

What are Props in React?

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. 

Props are passed from a parent component to the child component. Now, if you haven’t 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’ll understand this with the help of an example later on. 

Props Syntax

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:

Without destructuring:

The syntax of defining props without destructuring is given below.

function Course(props) {
    <div>{props.courseName}</div>
}

With destructuring:

The syntax of defining props as a destructuring argument is given below.

function Course({courseName}) {
    <div>{courseName}</div>
}

The detailed working of both the given methods is explained below in this blog.

How to use Props in React?

Now let’s 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’ll need two things: first one is the main function component (App.js) and a second component (Course) which we is going to render in our App.js component.

App.js Component File:

This is the App component (parent) which is the main file of a React application and in this component, we’ll be rendering our second component i.e., Course component which acts as a child component in which we’ll be passing props.

import React from "react";

function App() {

  return (
    <div>
	<h1>Guvi Courses</h1>
    </div>
  );
}

export default App;

Course component

This component will have a prop called courseName which will get its value dynamically after rendering inside the App.js component.

function Course(props) {
  return (
    <div>
      <ul>
        <li>{props.courseName}</li>
      </ul>
    </div>
  )
}

Now render the Course component into the App component to pass the props. Finally your App.js file should look like below:

import React from "react";

function Course(props) {
  return (
    <div>
      <ul>
        <li>{props.courseName}</li>
      </ul>
    </div>
  )
}

function App() {

  return (
    <div>
      <h1>Guvi Courses</h1>
      <Course courseName="Full Stack Development"  />
    </div>
  );
}

export default App;

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”.

Different ways of using props in react

Till now we have understood the basic syntax of using props in react and now we’ll 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.

1. using Props without Destructuring

The First way of using props is to use them without destructuring. When using props without destructuring we pass an argument known as props in the function. Let’s understand it step by step with the help of an example.

Step 1: Pass “props” as argument in function

To use props, we first pass the “props” keyword as an argument into our function which can be seen as follows.

function Course(props) {
	…
}

Step 2: Using variables directly in JSX template

Here we are not declaring the variables before rather we are using them directly into our JSX template i.e., into our <li> element.

function Course(props) {
	return (
    <ul>
       	        <li>{props.courseName}</li>
      	    </ul>
)
}

export default Course;

Step 3: Pass data in App.js component

Now our data will be passed to the main component i.e. App.js and will look like we are passing the attributes.

function App() {

  return (
    <div className="container">
      <Course courseName="Full Stack Development"  />
    </div>
  );
}

export default App;

Styles given below are optional to use.

//App.css file

.container {
  margin-left: 20px;
}

.container h1 {
  color: green
}

.container li {
  font-size: 20px;
}

Output:

After passing the props, your output will look like below.

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’ll see how to use props with destructuring.

2. using Props with Destructuring

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.

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’s understand this in detail and see it step by step with the help of an example.

Step 1: Destructuring the Course component

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 }) directly after the Course component.

function Course({ courseName, courseType }) {
     return (
       <ul>
       	   <li>{courseName}</li>
           <li>{courseType}</li>
       </ul>
     )
}

export default Course;

Step 2: Pass data in App.js component

Now our data will be passed to the main component i.e. App.js and will look like we are passing the attributes.

function App() {

  return (
    <div className="container">
      <h1>Guvi Courses</h1>
      <Course courseName="Full Stack Development" courseType="Development" />
    </div>
  );
}

export default App;

Output:

After passing the props, your output will look like below.

How to specify default value of prop

Sometimes, we don’t 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 = sign and the default value right after the parameter as shown below.

function Course({ courseName, courseType = "development" }) { 
     ... 
}

So, now when the <Course /> is rendered with no course type prop, it will be automatically set to “development”.

Kickstart your Full Stack Development journey by enrolling in GUVI’s certified Full Stack Development Career Program with Placement Assistance 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.

Alternatively, if you want to explore ReactJS through a self-paced course, try GUVI’s ReactJS self-paced course.

Conclusion

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.