How to output other components passed as props to the component?

Question

React

I pass the Header and Footer components to the Layout component and want to display them inside it.
How to do it right?
Now the functions of these components are passed to the console.log that is called in the layout, but nothing appears in the render.

Answer 1

Your Header is a component, not an element (instance). Therefore, getting it from props, you get a regular component that you draw in a standard way.

const { Header, Footer } = this.props;

return (
    <Fragment>
        <Header />
        <Footer />
     </Fragment>
);

But it is better to pass not a component, but a render function https://reactjs.org/docs/render-props.html.