Props is an abbreviation of properties, which are used to send data between two React components. In React, passing a component as a prop makes your components reusable. You can treat all kinds of data, including booleans, integers, strings, and arrays.

This tutorial will give the best ways to pass a component as props in React.

Prop In A Function Component

Components often receive props as an ordinary function argument. This one receives the object with described properties in the call.

import React from "react";

import ReactDOM from "react-dom";

function App() {

  return <Greeting name="Nathan" age={27} occupation="Software Developer" />;

}

function Greeting(props) {

  return (

    <p>

      Hello! I'm {props.name}, a {props.age} years old {props.occupation}.

      Pleased to meet you!

    </p>

  );

}

ReactDOM.render(<App />, document.getElementById("root"));

Besides passing various props at the same time, the above example shows the age prop in a number data type. It means any available data can be passed into pops. 

This way, it enables coders to use the top-down approach and send data.

How To Pass A Component As Props In React

Undoubtedly, passing components as props offers great flexibility and helps simplify the data sharing process among different components.

To accomplish the passing task, let’s use the children pop. In this method, the component’s closing and opening tags should be passed a ‘children’ prop.

This property is often used to compose components into each other. Thanks to its function, you can place the JSX and primitives between the tags of the closing and opening element.

In the component, you can receive the following props:

• icon: this is an icon component.
• hasIconRight: This boolean allows users to check the right position of the icon.
• title: it is often a string with a value of content to include in the button.
• onClick: this function is fired on the click event.
• primary: the boolean indicates the background color of the button as the primary color.

Let’s see how to pass the components as these props.

// 👇️ rename button prop to Button (capital first letter)

function Wrapper({button: Button}) {

  return (

    <div

      style={{

        display: 'flex',

        alignItems: 'center',

        justifyContent: 'center',

      }}

    >

      <Button />

    </div>

  );

}

export default function App() {

  const Button = () => {

    return <button onClick={() => console.log('button clicked')}>Click</button>;

  };

 // 👇️ pass button as props to the Wrapper component

  return (

    <div>

      <Wrapper button={Button} />

    </div>

  );

}

The string is placed between the tags of the element in this example. With the child component, you should use the React’s children prop to employ everything between the tags.

The component Button is passed as props to the component named Wrapper. If it takes props, you will pass it in the Wrapper component. 

function Wrapper({button}) {

  return (

    <div

      style={{

        display: 'flex',

        alignItems: 'center',

        justifyContent: 'center',

      }}

    >

      {button}

    </div>

  );

}

export default function App() {

  const Button = ({text}) => {

    return (

      <button onClick={() => console.log('button clicked')}>{text}</button>

    );

  };

  return (

    <div>

      <Wrapper button={<Button text="Some button text" />} />

    </div>

  );

}

Alternatively, the props can be set directly and passed to the Wrapper with the code above. In this case, instead of using ‘<Button/>’, the ‘{button}’ will be employed as a prop.

Everything passed between the opening tag and closing one will likely get rendered. Bear in mind the different results between the real function components to decide the right code.

Conclusion

In short, the best way to pass a component as props in React is to put all the chosen components between the parent’s tags and access these parent’s components with the children prop. 

Check the article above to learn the steps in detail.