All You Need to Know About Props in React
Tags: react, frontend, javascript, webdev
Published: 2023-05-02 06:00:54

## Introduction
In React, we always think about **Components**. These components need a way to communicate with each other. **Props** are a great way to communicate between components by sharing **data** between them. It is **unidirectional**. That means you can only pass data from the **Parent** to the **Child** component, not vice-versa. Passing data using **Props** is a **two-step** process: 
1. Passing Props to Child Component
1. Read Props inside the Child Component

## Passing Props to Child Component
Firstly, you need to pass the **Props** while calling the component. In HTML, attributes like `src`, `height`, and `width` are used for the `<img>` tag. In the same way, **Props** are used for React components. Here we can pass data using **custom attribute** names and provide them with any value.


```javascript
import ProfileCard from " . /components/ProfileCard.jsx";

const App = () => {
    const person = {
        name: 'John Doe', 
        age: 28
    };
    return ( 
        <div>
            <ProfileCard name={person.name} age={person.age}/>
        </div> 
     )
}

export default App;
```

## Read Props inside the Child Component
Secondly, You need to handle the **Props** in the **Child** component. In React, every Component gets a `props` object as a parameter in its definition function. With this object, we can declare any custom property to the component. In the following example, we have called the `props` object as parameter in the component definition. And in JSX, we used the `props.name` to refer to the `name` attribute. The same goes for `age` also.


```javascript
const ProfileCard = (props) => {
    return (
        <div className='card'>
            <div className='card-header'> 
                <h2>{props.name}</h2>
            </div> 
            <div className='card-body'> 
                <p>Age is: {props.age}</p>
            </div> 
        </div>
    )
}

export default ProfileCard;
```

## Children: A Special Prop
With the current example, we can only pass `props` as attributes. But if you don’t know about the content inside of the component. Consider you have a card component and the content inside that card you don’t know. In React, we encounter a lot of these **presentational** components, where we use them as wrapper components. For this, we can use the `children` props. Just use `props.children` in the function definition. Put any HTML content inside of the component while calling it.

```javascript
const Card = (props) => {
    return (
        <div className='card'>
            {props.children}
        </div>
    )
}

export default ProfileCard;
```

## Destructuring Props
Till now, we have written `props` and then its properties using the keys of the `props` object. But as the component grows, it is hard to manage. Instead, we can use **object destructuring** to define props. With that, you don’t need to use the `props` word multiple times. As a result, the code will be much **clean** and **readable**.

```javascript
const ProfileCard = ({name, age}) => {
    return (
        <div className='card'>
            <div className='card-header'>
                <h2>{name}</h2> 
            </div> 
            <div className='card-body'> 
                <p>Age is: {age}</p>
            </div> 
         </div>
    )
}

export default ProfileCard;
```

## Passing Data from Child to Parent using Props
**Props** are **unidirectional**. How can we pass data from the **Child** to the **Parent** component? There is a way we can do it. We can’t pass the **Child** component’s data directly to **Parent** Component. But, by using functions as **Props**, we can do it. Firstly, We need to pass an argument in the **Child** component. Then, declare a function in the **Parent** component to handle that argument.


```javascript
const Button = ({themeHandler}) =>
    return ( 
        <div>
            <Button onClick={() => {themeHandler('dark')}}/> 
        </div>
    )
}

export default Button;
```

```javascript
import Button from ". /components/Button.jsx";

const App = () => {
    const [theme, setTheme] = useState('light');
    const themeHandler = (theme) => {
        setTheme(theme);
    }
    return ( 
        <div>
            <h2>Current Theme: {theme}</h2>
            <Button themeHandler={themeHandler} /> 
        </div>
    )
}

export default App;
```

## Summary
In this article, we discussed: **What is Props**, **How to declare it**, **Destructuring Props**, **Children Props** and **Passing Data from Child to Parent Props**. **Props** are the basic building block of React ecosystem. Follow me to learn more about **React** and other **Frontend Development** skills.