In this article we are going to see the way how we can pass children in react. 

Children is nothing but whatever we pass inside of a component at the time of calling a componenet like props.

See example bellow.

In this example going to create tow react component App, Layout and from app componenet we pass some content App component to Layout component

See example bellow

Layout.jsx

import React from "react";
export default function Layout({ children }) {
  return (
    <>
      <h1>This is layout page</h1>
      <div>{children}</div>
    </>
  );
}

 

App.jsx

import React from "react";
import Layout from "./compontents/Layout";

export default function App() {

  return (

    <Layout>

      {/* whatever we pass from here we can access inside layout component as a chilrder by distructuring props */}

      <h3>This is children text</h3>

      <p>
        In publishing and graphic design, Lorem ipsum is a placeholder text
        commonly used to demonstrate the visual form of a document or a typeface
        without relying on meaningful content. Lorem ipsum may be used as a
        placeholder before the final copy is available
      </p>


    </Layout>
  );
}