In React, every component’s props object has a property named children.

props.children will return everything between a component’s opening and closing JSX tags.

For example, say we have a component called Layout, which takes a prop called children and renders it inside an article tag. This will render everything between opening and closing JSX tags of the Layout component (between <Layout> and <Layout /> ) inside the article tag.

const Layout = ({ children }) => {
  return <article>{children}</article>
}
export default Layout

Now, we can use the Layout component to provide common layout for multiple pages. All we need to do is wrap the contents of those pages with the Layout component, as shown below:

const Introduction = () => {
  return (
    <Layout>
      <h1>Introduction</h1>
      <p>What is Express.js?</p>
    </Layout>
  )
}