Props allow us to pass data into components so we can reuse them and build interactive apps in React. In this guide, you will learn about one of the advanced use cases: passing components as props. This way, you can reuse even more of your code and build dynamic components with . React There are several ways to pass components via props. Let’s start with the simplest approach. Pass components as props. You can pass components the same way you’d pass any data in React. Needless to say, you will need curly braces to set component values for props. Let’s look at an example: function App() {
  return (
    <div className="App">
      <Header text={<Text />} />
    </div>
  );
}
function Header({ text }) {
  return <div>{text}</div>;
} The component will render the component. Header Text Make sure that the name of the component is capitalized. Once passed, the child (in this case ) component can access the component via props. Header You can even set props on the component you are passing via props. Here’s a live example from . CodeSandbox In this example, we pass prop to customize the color of the text. color This is a fairly easy and readable way to pass components via props. Now, let’s explore another, arguably better way to pass multiple components via props. Pass component(s) via children prop Let’s say you have a container and want to change its content depending on URL, user input, or any other factor. interface allows you to dynamically pass it a certain set of components and elements. children Syntax for using prop is straightforward – simply include components between the opening and closing tags of the component. children function App() {
  return (
    <div>
      <Header>
        <Text />
        <Button />
      </Header>
    </div>
  );
}
function Header({ children }) {
  return <div>{children}</div>;
}

function Text(props) {
  return <h1 style={{ color: props.color }}>Hello World</h1>;
}

function Button(props) {
  return <button>Click</button>;
} The component will automatically display all components passed between its opening and closing tags when it is invoked. Header Note: In the component, we use destructuring syntax to access property of . Normally, you would access it on . Header children props props.children Which is a better way to pass components as props? There are advantages and disadvantages to passing components directly or via prop. children The prop is simpler and more readable if you have multiple components or complex code. Its disadvantage is that all components passed in via children are lumped together. You can’t break up prop and put various groups at different places in your child component. children children Passing components directly via props is better, as you can access individual components and invoke them at different places in your child component. If you’d like to learn more, head to my blog, where I publish dozens of like this one. React guides

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Augmentastic || Augmented Reality

How to Handle Hover Events in React

How to Pass A Function via Props in React

My writing portfolio

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

How to Pass Components Via Props in React

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How To Get Key Clicked Element in React

How to Use the Extract Method Refactoring Technique in C#

How to Publish Your First Angular Library Into a Package Registry

How To Get Key Clicked Element in React

Data Flow in ReactJS

How To Get Key Clicked Element in React

How to Use the Extract Method Refactoring Technique in C#

How to Publish Your First Angular Library Into a Package Registry

How To Get Key Clicked Element in React

Data Flow in ReactJS

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps