All You Need to Know About Props in React

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

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.

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.

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.

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.

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

export default Button;

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.