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

My best bet is that you are having a compilation error, from what you have in your codebase {this.props.children} will result in an error, you use this props in a class-based component, whereas you are using a functional component for < DefaultLayout/>

Instead do

const DefaultLayout = (props) => {
...
<Content className="site-layout-background" style={...}>
   {props.children}
</Content>
}