Sometimes, we want to add a header and footer into a layout component with React.

In this article, we’ll look at how to add a header and footer into a layout component with React.

How to add a header and footer into a layout component with React?

To add a header and footer into a layout component with React, we can add the header and footer into the layout component.

For instance, we write:

import React from "react";

const Header = () => <header>header</header>;

const Footer = () => <footer>footer</footer>;

const Layout = ({ children }) => {
  return (
    <div>
      <Header />
      {children}
      <Footer />
    </div>
  );
};

export default function App() {
  return <Layout>hello world</Layout>;
}

We define the Header and Footer components to render content for the header and footer of the layout respectively.

Then we define the Layout component to render the Header and Footer around the children prop.

children has the content between the opening and closing tags of Layout.

Therefore, we see:

header
hello world
footer

rendered on the screen.

Conclusion

To add a header and footer into a layout component with React, we can add the header and footer into the layout component.