What are Props in React?

We have already seen what Props in React are, in our previous blogs when we compared props and states and how to use them in functional and class components.

In this blog, we will understand how important props are in React when it comes to making the flow of our app dynamic.

Let’s begin…

What are props in React?

Props are the short form of properties that we can pass between the parent and the child component and can use it as we want but cannot change its values as they are read-only properties.

As told above, they can easily make the flow of the app dynamic

We can pass everything as props to the child component, especially functions that will help in updating the state of the parent component.

Let’s understand props with a simple React code –

We will make two reusable components Example.js and Tool.js, where the Example Component is the parent Component, and the Tool Component is the child component as shown

Now, import the Tool Component in the Example Component and pass a prop — name=”Ateev” in the with the Tool Component.

import React from "react";
import Tool from "./Tool";
const Example = () => {
return (
<>
<div className="app">
<Tool name="Ateev" />
</div>
</>
);
};
export default Example;

And we will use this prop in our Tool Component like this

import React from "react";
const Tool = (props) => {
return (
<div className="bg-dark text-white">
<h1 className="px-5 pt-5">My name is {props.name}.</h1>
<p className="fs-5 px-5 pb-5">I am a front-end developer.</p>
</div>
);
};
export default Tool;

We will get something like this –

We have passed the name from the Example Component as props to the Tool Component where we have used this in our Tool Component as props.name as shown, and we have our value in the above.

There are various ways of passing the props and using them inside our child component.

Let’s first discuss how we can use props in our child component. There are mainly three ways of doing it –

1. With destructuring
2. Without destructuring
3. Using defaultProps

You can read the full article here.