Pass Props through a Component's Render Function

React largely adheres to a top-down approach when it comes to passing data through from parent to child components. A component's render function is the place where this transfer of data happens.

Nov 9, 2020 • 4 Minute Read

Subscribe to the newsletter

Introduction

The tree structure is closely linked to any programming that happens within the browser. The document object model, or DOM for short, contains all of the HTML elements to be displayed on a page and is a large tree structure itself. So, it naturally follows that the React component hierarchy will be modeled in the same fashion, albeit with JavaScript as opposed to raw HTML.

React components contain child components that can contain more children and so on. This parent-child relational structuring of components means that when you write code in React, you often need to pass data down from parent to child. One of the main ways to achieve this is through the passing of component props.

In this guide, you will learn about one of the primary mechanisms for passing data to child components: passing props to children inside of the render function.

Let's get started!

Passing Props

Passing props through to child components from a parent component is very straightforward. First, ensure you have a parent component. In the example below, a root-level React component named MyApp serves as the parent component.

From here, you can create the child components that you need. In the example below, there are three child components: TitleBar, NavBar, and DataView. These three components expect their data to come via props passed in from a parent component. You can achieve this by passing these props through to the child components when they are declared inside of the parent component render function. The code below displays this possibility.

      import React from 'react';

class MyApp extends React.Component {
    dataPoints = [ 1, 2, 3, 4, 5 ];
    title = "Welcome To My App!";
    navStructure = [
        {
            text: "Home",
            url: "/home"
        },
        {
            text: "About",
            url: "/about"
        },
        {
            text: "Contact Us",
            url: "/contact-us"
        }
    ];



    render() {
        const { title, navStructure, dataPoints } = this.props;

        return (
            <div>
                <TitleBar title={ title } />
                <NavBar navStructure={ navStructure }>
                <DataView data={ dataPoints }>
            </div>
        )
    }

}
    

As you can see, the parent component MyApp declares three properties when it is instantiated. These properties are dataPoints, title, and navStructure. Next, looking closely at the render function, you can see that our aforementioned child components are declared within it. Furthermore, each one of the declared component properties is passed through to the correct child component. The syntax above is the syntax that is needed in order to facilitate this specific type of data transfer within React.

Conclusion

Passing data by way of props from parent components to child components is a crucial part of how React apps are structured from a data transfer perspective. React largely adheres to a top-down approach when it comes to passing data through from parent to child components. A component's render function is the place where this transfer of data happens.

But this isn't the only way to pass data by any means! You can pass component state from parent to child as well. Not only this, but the new context API along with React portals can allow you to transfer data in a variety of other ways that can potentially better suit your app needs.

For more information regarding React and the different ways that you can transfer data within your app, please check out the React documentation.