this.props.children in my code isn't working. i.e it isn't displaying the content in another js file

Question

So basically this.props.children in my code isn't working. i.e it isn't displaying the content in another js file. There is one file defaullayout.js which has a content section in order to display the layou in a page hompage.js. So i am trying to give {this.prop.children} in content to display the defaltlayout page in homepage but the whole page is being shown blank. Please help me with this.Thank you!

Here is my code for first page`thta is DefaultLayout.js

`

import React, { useState } from 'react';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
  CopyOutlined ,
  UnorderedListOutlined,
  LogoutOutlined ,
  HomeOutlined
} from '@ant-design/icons';
import { Layout, Menu } from 'antd';
import '../resources/layout.css';
import { Link } from 'react-router-dom';
import { ReactDOM } from "react-dom";
const { Header, Sider, Content } = Layout;
const DefaultLayout = () => {
  const [collapsed, setCollapsed] = useState(false);
  return (
    <Layout>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="logo"> <h3>SI Pos</h3> </div>
        
        <Menu theme="dark" mode="inline" defaultSelectedKeys={window.location.pathname}>
            <Menu.Item key="/home" icon={<HomeOutlined />}>
              <Link to='/home'>Home</Link>
            </Menu.Item>
                    
            <Menu.Item key="/bills" icon={<CopyOutlined />}>
              <Link to='/bills'>Bills</Link>
            </Menu.Item>
                    
            <Menu.Item key="/items" icon={<UnorderedListOutlined />}>
            <Link to='/items'>Items</Link>
            </Menu.Item>

          <Menu.Item key="/customers" icon={<UserOutlined />}>
            <Link to='/customers'>Customers</Link>
            </Menu.Item>

          <Menu.Item key="/logout" icon={<LogoutOutlined />}>
                Logout
            </Menu.Item>
        </Menu>
      </Sider>
      <Layout className="site-layout">
        <Header
          className="site-layout-background"
          style={{
            padding: 10,
          }}
        >
          {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
            className: 'trigger',
            onClick: () => setCollapsed(!collapsed),
          })}
        </Header>
        <Content
          className="site-layout-background"
          style={{
            margin: '10px',
            padding: 24,
            minHeight: 280,
          }}>
        
          {this.props.children}
        </Content>
      </Layout>
    </Layout>
  );
};
export default DefaultLayout;

and the second page is Homepage.js

`

import React from "react";
import DefaultLayout from "../components/DefaultLayout";

function Homepage(){
    return(
        <DefaultLayout>
            <h1>hey</h1>

        </DefaultLayout>
    
    )
}

export default Homepage;

` ``

I am expecting to get my default page displayed in homepage. Thanks in advance.

Answer 1

As informed before you will have to change

const DefaultLayout = () => {}

to

const DefaultLayout = (props) => {}

and remove this from {this.props.children} as this is not available in an arrow function.

I have put together a quick example for you here: https://codesandbox.io/s/react-playground-forked-pr7lsc?f