React Props Tutorial: Complete Guide to Passing Data Between Components

Introduction

If you want to pass information from a parent component to a child component in React then props are what you’re looking for.

As you may know, in React we represent or model the UI or user interface as components nested with each other forming a tree.

Each component is responsible for its own Markup and logic.

React follows an unidirectional data flow model, meaning that information can only be passed from parent components or the top of the tree to children components towards the bottom of the tree.

Props are the medium allowing children components to accept data from their parent components.

Passing Props Between Components

We saw in the previous videos of the series that defining a component consists only of declaring a function whose name’s first letter is capitalized and returning the code representing the Markup that is known as JSX.

So given these two components named ParentComponent and ChildComponent how can we pass data unidirectionally from The parent to the child?

function ChildComponent(){
  return (<h1></h1>);
}

function ParentComponent(){
  return (
    <div>
      <ChildComponent />
    </div>
  );
}

Passing Props from one component to another is as simple as passing normal attributes to an Html tag.

Every component has access to a props object, which stores the data passed by its parent component.

So in the child component, we can read the content attribute from the props object as shown bellow, then render it in its Markup using the curly bracket syntax:

function ChildComponent(props){
  return (<h1>{props.content}</h1>);
}

Unlike normal Html attributes, props can include any Javascript value including arrays, functions, or even JSX code or components.

There is a more concise way to read props in our child component which is using the destructuring Javascript's syntax that basically allows extracting the attributes which we care about from a Javascript object.

function ChildComponent({content}){
  return (<h1>{content}</h1>);
}

Prop Forwarding and Spread Operator

Okay, now let’s say that you have 3 levels of nesting.

A parent component that renders A component named ComponentChild1 while passing 3 props: a title, a description and an image.

The ChildComponent1 renders the content of the title inside an h1 tag and then forwards the description and the image props to a third component named ChildComponent2.

This can quickly get cumbersome as the number of forwarded props increases and also it’s less resistant to changes when we want to forward more props.

So instead of forwarding the props manually like that

We can only destructure the title, and use the spread operator syntax to store the remaining props in an object called restProps.

After that we can pass the rest props to the Child2Component using this syntax <ChildComponent2 {...restProps}/>

function ParentComponent(){
  return (
    <div>
      <ChildComponent1 
        title={"This is a message from component 1"} 
        description={"description"} 
        image={<img src="...lorem picsum" alt="image alt"/>} 
      />
    </div>
  );
}

function ChildComponent1({title, ...restProps}){
  return (
    <div>
      <h1>{title}</h1>
      <ChildComponent2 {...restProps}/>
    </div>
  );
}

function ChildComponent2({description, image}){
  return (
    <div>
      {description}
      {image}
    </div>
  );
}

Children Props and Higher Order Components

We render components inside other ones using a similar syntax to Html tags.

Some Html tags can wrap other elements within them, so can we do that with components as well?

Yes, definitely we can make a component wrap other components or JSX code, and inside its declaration code we can receive what was wrapped by the component using a special built-in prop called children

function WrapperComponent({children}){
  return (<>{children}</>);
}

Components that wrap other components in a similar way as presented in the previous example are known as Higher order components.

Conclusion

React props are a fundamental concept of React which allow data to flow from parents to children components and make it possible to reuse components in different scenarios.

In the next article, we will be learning how you can display different things depending on different conditions either using if statements within the Javascript logic of the component or the logical and ternary operators within the Markup itself.

Thank you for your attentive reading and happy coding 🧑‍💻.