this.props.children in my code isn't working. i.e it isn't displaying the content in anoth-CodePudding

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.

CodePudding user response：

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>
}

CodePudding user response：

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