I am currently trying to integrate Patternfly React in my project. This is the link im using for reference which is working fine. But need to have separate component for header , footer , topnav and sidenav. So while partitioning the code in to components im getting issue as
Invalid prop nav supplied to
PageSidebar
, expected a ReactNode.
Here is my Sidenav Code
import ReactDOM from 'react-dom';
import "@patternfly/react-core/dist/styles/base.css";
import '../../app/fonts.css';
import React from 'react';
import {
Nav,
NavExpandable,
NavItem,
NavList
} from '@patternfly/react-core';
function SideNav() {
this.state = {
activeGroup: 'grp-1',
activeItem: 'grp-1_itm-1'
};
this.onNavSelect = result => {
this.setState({
activeItem: result.itemId,
activeGroup: result.groupId
});
};
const { activeItem, activeGroup } = this.state;
const PageNav = (
<Nav onSelect={this.onNavSelect} aria-label="Nav" theme="dark">
<NavList>
<NavExpandable title="System Panel" groupId="grp-1" isActive={activeGroup === 'grp-1'} isExpanded>
<NavItem groupId="grp-1" itemId="grp-1_itm-1" isActive={activeItem === 'grp-1_itm-1'}>
Overview
</NavItem>
<NavItem groupId="grp-1" itemId="grp-1_itm-2" isActive={activeItem === 'grp-1_itm-2'}>
Resource usage
</NavItem>
<NavItem groupId="grp-1" itemId="grp-1_itm-3" isActive={activeItem === 'grp-1_itm-3'}>
Hypervisors
</NavItem>
</NavExpandable>
</NavList>
</Nav>
);
return (PageNav);
}
export default SideNav;
The above is my sideNav function component and using it in my layout component.
My Header component
import "@patternfly/react-core/dist/styles/base.css";
import '../../app/fonts.css';
import React from 'react';
import {
Page,
PageHeader,
PageSection,
PageSectionVariants,
PageSidebar,
TextContent,
Text,
} from '@patternfly/react-core';
import SideNav from '../sideNav/sideNav';
class Layout extends React.Component {
render() {
const Header = (
<PageHeader
toolbar={PageToolbar}
showNavToggle
/>
);
const Sidebar = <PageSidebar nav={SideNav} theme="dark" />;
return (
<React.Fragment>
<Page
header={Header}
sidebar={Sidebar}
mainContainerId={pageId}
>
<PageSection variant={PageSectionVariants.light}>
<TextContent>
<Text component="h1">Main title</Text>
<Text component="p">
Body
</Text>
</TextContent>
</PageSection>
</Page>
</React.Fragment>
);
}
}
export default Layout;
The issue is when passing my function component to Patternfly's PageSidebar component in nav attribute as
const Sidebar = <PageSidebar nav={SideNav} theme="dark" />;
.
What exactly is wrong with this?
Looking at the code in the seed app, the nav
property of <PageSidebar>
is set to some React elements (some JSX), and not to a React component (a function returning some JSX).
I guess that instead of using nav={Sidenav}
, you should use nav={<Sidenav />}
, to make your code match the example.