Pass a Component as Props in React

When you want to share a React component between different parts of your app, you can’t export and import it wherever you want. You should pass the components as props.

In this article, we will explore two ways to pass components as props in react.

1. Pass a Component as a children

To pass component as a children wrap it between opening and closing tags of a component.

App.js

function ParentComponent({ children }) {
  return <div style={{ textAlign: "center" }}>{children}</div>;
}

export default function App() {
  const ChildComponent = () => {
    return <h1>Hello world</h1>;
  };

  // 👇️ pass children to the Parent component
  return (
    <div>
      <ParentComponent>
        <ChildComponent />
      </ParentComponent>
    </div>
  );
}

The above example shows how everything we passed between the opening tag and the closing tag of a component is assigned to the children prop of the parent component in React.

The component can destructure its children property from the props object and render it as it was with the ChildComponent component.

Alternatively, you can directly pass the child component to the parent as a prop.

2. Pass a Component as a prop

App.js

// 👇️ rename button prop to Button (capital first letter)
function ParentComponent({ button: Button }) {
  return (
    <div
      style={{
        textAlign: "center",
      }}
    >
      <Button />
    </div>
  );
}

export default function App() {
  const Button = () => {
    return <button onClick={() => console.log("clicked")}>Click here</button>;
  };

  // 👇️ pass button as props to the Parent component
  return (
    <div>
      <ParentComponent button={Button} />
    </div>
  );
}

We passed the Button component as props to the ParentComponent.

Since all component names start with a capital letter in React, we renamed the button prop to Button in ParentComponent.

If the component accepts props, you can directly pass props when you pass this component as props to the parent component.

App.js

function ParentComponent({ button }) {
  return (
    <div
      style={{
        textAlign: "center",
      }}
    >
      {button}
    </div>
  );
}

export default function App() {
  const Button = ({ text }) => {
    return <button onClick={() => console.log("clicked")}>{text}</button>;
  };

  return (
    <div>
      <ParentComponent button={<Button text="Click Here" />} />
    </div>
  );
}

Note that we aren’t passing the component’s function but rather the value returned by the Button component. This means we need to use the props as {button}, instead of <Button/> in our ParentComponent.

You can also pass props as children in the child component. Here’s an example of the passing of the Button component that uses the prop of a child’s object and renders them into children.

App.js

function ParentComponent({ button: Button }) {
  return (
    <div
      style={{
        textAlign: "center",
      }}
    >
      <Button>
        <h1>Hello World</h1>
      </Button>
    </div>
  );
}

export default function App() {
  const Button = ({ children }) => {
    return <button onClick={() => console.log("clicked")}>{children}</button>;
  };

  return (
    <div>
      <ParentComponent button={Button} />
    </div>
  );
}

Anything we pass in between opening or closing tags on the Button element will be rendered.

When passing components to props, be aware of the time you pass the component that actually performs the function, e.g. button={Button} vs when you specify your function’s return value, e.g. button={<Button text="Click Here" />}.

This is crucial because when you pass the function component, it can be used as <Button />. While you pass the return value of the function, it should be used as {button}.

Conclusion

We explored two ways to pass components as props in React; passing components as children and passing components as a prop. You can use any approach you would like.

Learn More:

1. Pass a Component as a children

2. Pass a Component as a prop

Conclusion

Leave a Comment Cancel reply