How to correctly pass another component as a prop?

Question

React

I get the error Objects are not valid as a React child (found: object with keys {$$typeof, type, compare}). If you meant to render a collection of children, use an array instead.

const Header = props => (
    <div className="navHeader">
      {props.top}
    </div>
  );

  
export const Top = React.memo(props => (
  <div className="top">
    <div className="site-identifier">
      <Logo />
      <Link to="/">
        Привет
      </Link>
    </div>
    {props.children}
  </div>
));

called in App

import Header, { Top } from "./views/header";
<Header top={Top}/>

The Top component must be passed in props. Thanks

Answer 1

Consider the option:

const Header = ({ children }) => (
    <div className="navHeader">
      {children}
    </div>
  );

<Header>
  <Top />
</ Header>

You can also solve something like this:

const Header = ({ top }) => {
  const HeaderTop = top || Top;
  
  return (
    <div className="navHeader">
      <HeaderTop />
    </div>
  );
};

Then you will have a default component, and the top property can only be used where you need to use another component.

<Header top={OtherTopCompnent} /> // используем другой компонент

Answer 2

const Header = ({ Top }) => (
  <div className="navHeader">
    <Top />
  </div>
);

...

<Header Top={Top} />