# What are React Props? and How to Use Them for Dynamic Data Output?

# **What is React Props?**

Props are an acronym for "properties." Props are arguments that are passed into React components, providing a method for passing data from one component to another. They enable components to be reused.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1680519663746/82102549-d381-4c21-a423-911549fff73a.png align="center")

The component receives props in the same manner as function parameters.

HTML attributes are used to pass props to components.

As I mentioned in the opening, the concept of props is built on the idea of components. So, without a component to work with, we can't use props successfully.

Below is the structure of the parent component (i.e. `App.jsx`)

```jsx
import './App.css'
import Card from "../components/Card/Card";

const App = () => {
	return (
		<div className='App'>
			<Card />
		</div>
	);
};

export default App;
```

Below is the structure of the child component (i.e. `Card.jsx`)

```jsx
import React from "react";

const Card = () => {
	return (
		<div id="card">
			<img src="<https://i.postimg.cc/dQ7zWbS5/img-4.jpg>" alt="img" />
			<div className="info">
				<h2>Ella</h2>
				<p>Work: Student</p>
				<p>Hobby:Reading </p>
				<p className="bottom">From: Spain</p>
			</div>
		</div>
	);
};

export default Card;
```

Let’s add some styling to our card component because who doesn’t like styling ( in `App.css` )

```jsx
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.App {
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
}

#card {
	width: 17rem;
	height: 10rem;
	padding: 1em 0.1em;
	background: #f4f3ee;
	box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.59);
	z-index: 5;
	border-radius: 5px;
	display: flex;
	justify-content: space-evenly;
}

#card img {
	width: 6rem;
	border-radius: 5px;
	margin-right: 20px;
}

#card h2 {
	font-family: courier;
	color: #333;
}

#card p {
	color: #555;
	font-size: 13px;
}

#card :nth-child(4) {
	margin-top: 30px;
	color: #212138;
	font-size: 0.85em;
}
```

After that, our code and react app will look like this

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1680460269788/4c68e40d-fea9-4bd0-9fa9-e647d91a09ee.png align="left")

Our goal is to be able to display information about people which vary in name, work, hobby and origin. We are using a simple card component to display information about a person here.

The card component can be reused multiple times by simply re-rendering it. For example:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1680460322254/dd9699a8-bc3f-4815-9414-51d9054c3952.png align="left")

Isn’t it amazing! The React functionality of repeating a particular design without writing much code is evident.

But we still haven't accomplished our goal, right? While we want to reuse the component, we also want to update the name of the `person`, `work`, `hobby`, `origin` and `image` without having to hardcode any data in the `Card.jsx` component.

This is where we can use props in React to make our data output dynamic.

# **How to Use React Props**

> **📝Note:** In React, data flows in a one-way direction from parent to child components. This unidirectional flow ensures that child components cannot modify data passed from the parent.

Our data will be passed from `App.jsx` which is the parent component to `Card.jsx` which is the child component (and never the other way).

## **How to Send Props into a Component**

The passing of props into a component is analogous to the functioning of attributes in HTML elements.

To pass attributes into an HTML input element, you simply write the attribute and attach its corresponding value., just like this:

```html
<input type="text" placeholder="text" />
```

When sending props, which are similar to attributes and properties, you can attach values to them.

Below is the syntax:

```javascript
<ComponentName property1="value" property2="value" property3="value" />
```

Assigning a value to each property is done within the component tag after writing the component name.

Now let's use the syntax above to pass data into the `App.jsx` component:

```jsx
<Card
	img="<https://images.pexels.com/photos/1878687/pexels-photo-1878687.jpeg?auto=compress&cs=tinysrgb&w=800&lazy=load>"
	name="Alex"
	work="Designer"
	hobby="Painting"
	origin="Australia"
/>
```

In the code above, the component name within the tag is `Card` and the first property or prop is `img` with its value [`https://images.pexels.com/photos/1878687/pexels-photo-1878687.jpeg?auto=compress&cs=tinysrgb&w=800&lazy=load`](https://images.pexels.com/photos/1878687/pexels-photo-1878687.jpeg?auto=compress&cs=tinysrgb&w=800&lazy=load) attached to it. Then we have the `name` which is the second property and so on (with assigned values).

> **📝Note:** There's a slight difference between writing HTML attributes and passing in props: while HTML attributes are special keywords already provided for you, you customize and define props in React.
> 
> For example, I created the properties; `img`, `name`, `work`, `hobby` and `origin` above. Then, I attached the values of the props alongside them.

## **How to Access and Use Props in React**

The component receives `props` as a function parameter. It uses the value of props by defining the parameter as props objects.

> **📝Note:** React uses the value of props by defining the parameter as props objects.

Below is the syntax:

```jsx
//the function receives 'props' as a parameter
const ComponentName = (props) => {
    return (
      <div>
        <img src={props.objectName} alt="image" />
        <h1>{props.objectName}</h1>
      </div>
    );
}

export default ComponentName;
```

Let's relate the syntax above to our `Card.jsx` by receiving `props` as a parameter function and by defining props as object:

```jsx
import "./App.css";
import Card from "../components/Card/Card";

const App = () => {
	return (
		<div className="App">
			<Card
				img="<https://images.pexels.com/photos/1878687/pexels-photo-1878687.jpeg?auto=compress&cs=tinysrgb&w=800&lazy=load>"
				name="Alex"
				work="Designer"
				hobby="Painting"
				origin="Norway"
			/>
		</div>
	);
};

export default App;
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1680460444814/5b60d96c-9838-484c-817a-709de3886223.png align="left")

We have successfully made the data we passed into the `Card.jsx` component dynamic.

To reuse the `Card.jsx` component to show the data of other people, all we need to do is to attach the new data or values when re-rendering the component.

```jsx
import "./App.css";
import Card from "../components/Card/Card";

const App = () => {
	return (
		<div className="App">
			<Card
				img="<https://images.pexels.com/photos/1878687/pexels-photo-1878687.jpeg?auto=compress&cs=tinysrgb&w=800&lazy=load>"
				name="Alex"
				work="Designer"
				hobby="Painting"
				origin="Norway"
			/>
			<Card
				img="<https://images.pexels.com/photos/1130623/pexels-photo-1130623.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2>"
				name="Sofia"
				work="Blogger"
				hobby="Cooking"
				origin="Brazil"
			/>
		</div>
	);
};

export default App;
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1680460586522/cd38fae1-cab1-4099-8e21-08309be96d8d.png align="left")

# **Destructuring Props in React**

Now that we’ve achieved the functionality we aimed for, let’s format our `Card.jsx` by making use of destructuring. This JavaScript feature entails transferring bits of data from an object or array to another variable so that the variable may store the data from the array or object.

Props are objects. The first step in destructuring an object in React is to arrange its properties within a set of curly braces. Next, you can either send it as a parameter directly to the method or save it in a variable named `props`.

Now, receive the properties where you need them by specifying their names without the prefix `props`.

## Two ways to destructure in React:

### First method:

```jsx
const ComponentName = (props) => {
//First Step: Destructuring within the body of the function
    const {img, name} = props ;
    return (
//Second Step: receive the properties where you need them by stating the names 
      <div>
  		<img src={img} alt="image" />
        <h1>{name}</h1>
      </div>
    );
}

export default ComponentName;
```

### Second method:

```jsx
//First Step: Destructuring within function's parameter
function Product = ({img, name}) => {
    return (
//Second Step: receive the properties where you need them by stating the names
      <div>
  		<img src={img} alt="products" />
        <h4>{name}</h4>
      </div>
    );
}

export default Product;
```

Let’s see this in our app

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1680460619719/f18643db-1fa9-408c-b708-34c5c2532809.png align="left")

It looks clean and nice! Destructuring in React makes our code more readable and more concise.

# **How to Set a Default Value for Props**

The `defaultProps` is a React component property that allows us to set default values for the props argument. It usually comes in handy when we don’t have any props data passed in.

Let's go ahead and create a default prop for our app:

```jsx
import React from "react";

const Card = ({ img, name, work, hobby, origin }) => {
	return (
		<div id="card">
			<img src={img} alt="img" />
			<div className="info">
				<h2>{name}</h2>
				<p>Work : {work}</p>
				<p>Hobby: {hobby} </p>
				<p className="bottom">From : {origin}</p>
			</div>
		</div>
	);
};

Card.defaultProps = {
  name: "Diksha",
  img : "<https://images.pexels.com/photos/1144170/pexels-photo-1144170.jpeg?auto=compress&cs=tinysrgb&w=600>",
	work: "Student",
	hobby: "Dancing",
	origin: "India"
}

export default Card;
```

Just before exporting the component, we set default values for the props toward the end of our code.

To declare default props, we used the component's name followed by a dot and then `defaultProps`.

With this, everywhere we import this component, these values will be the initial values, thus we won't have an empty prop. The default settings, however, are then overridden when we pass data into it.

For Example, in the below example, I did not pass any prop for the last card in `App.jsx`.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1680460675107/bf8f9e53-3f43-45b2-8708-ab53a31fdd04.png align="left")

# Wrapping Up

As a beginner, this article covered all the necessary information about props, including their definition and usage.

Please share this article if you found it helpful. Thanks for reading!