I exported the SideBar and Imported it in my App.jsx
SideBar.jsx
'use client' import { IconButton, Avatar, Box, CloseButton, Flex, HStack, VStack, Icon, useColorModeValue, Text, Drawer, DrawerContent, useDisclosure, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Image } from '@chakra-ui/react' import { FiHome, FiTrendingUp, FiCompass, FiStar, FiSettings, FiMenu, FiBell, FiChevronDown, } from 'react-icons/fi' const LinkItems = [ { name: 'Home', icon: FiHome }, { name: 'Trending', icon: FiTrendingUp }, { name: 'Explore', icon: FiCompass }, { name: 'Favourites', icon: FiStar }, { name: 'Settings', icon: FiSettings }, ] const SidebarContent = ({ onClose, ...rest }) => { return ( <Box transition="3s ease" bg={useColorModeValue('white', 'gray.900')} borderRight="1px" borderRightColor={useColorModeValue('gray.200', 'gray.700')} w={{ base: 'full', md: 60 }} pos="fixed" h="full" {...rest}> <Flex h="20" flexDirection="column" alignItems="center" mx="8" mb={75} mt={2} justifyContent="space-between"> <Text fontSize="2xl" fontFamily="monospace" fontWeight="bold" mb={5}> Dashboard </Text> <Image borderRadius='full' boxSize='75px' src=' alt='Dog Profile' /> <CloseButton display={{ base: 'flex', md: 'none' }} onClick={onClose} /> </Flex> {LinkItems.map((link) => ( <NavItem key={link.name} icon={link.icon}> {link.name} </NavItem> ))} </Box> ) } const NavItem = ({ icon, children, ...rest }) => { return ( <Box as="a" href="#" style={{ textDecoration: 'none' }} _focus={{ boxShadow: 'none' }}> <Flex align="center" p="4" mx="4" borderRadius="lg" cursor="pointer" _hover={{ bg: 'cyan.400', color: 'white', }} {...rest}> {icon && ( <Icon mr="4" fontSize="16" _groupHover={{ color: 'white', }} as={icon} /> )} {children} </Flex> </Box> ) } const MobileNav = ({ onOpen, ...rest }) => { return ( <Flex ml={{ base: 0, md: 60 }} px={{ base: 4, md: 4 }} height="20" alignItems="center" bg={useColorModeValue('white', 'gray.900')} borderBottomWidth="1px" borderBottomColor={useColorModeValue('gray.200', 'gray.700')} justifyContent={{ base: 'space-between', md: 'flex-end' }} {...rest}> <IconButton display={{ base: 'flex', md: 'none' }} onClick={onOpen} variant="outline" aria-label="open menu" icon={<FiMenu />} /> <Text display={{ base: 'flex', md: 'none' }} fontSize="2xl" fontFamily="monospace" fontWeight="bold"> Logo </Text> <HStack spacing={{ base: '0', md: '6' }}> <IconButton size="lg" variant="ghost" aria-label="open menu" icon={<FiBell />} /> <Flex alignItems={'center'}> <Menu> <MenuButton py={2} transition="all 0.3s" _focus={{ boxShadow: 'none' }}> <HStack> <Avatar size={'sm'} src={ ' } /> <VStack display={{ base: 'none', md: 'flex' }} alignItems="flex-start" spacing="1px" ml="2"> <Text fontSize="sm">Justina Clark</Text> <Text fontSize="xs" color="gray.600"> Admin </Text> </VStack> <Box display={{ base: 'none', md: 'flex' }}> <FiChevronDown /> </Box> </HStack> </MenuButton> <MenuList bg={useColorModeValue('white', 'gray.900')} borderColor={useColorModeValue('gray.200', 'gray.700')}> <MenuItem>Profile</MenuItem> <MenuItem>Settings</MenuItem> <MenuItem>Billing</MenuItem> <MenuDivider /> <MenuItem>Sign out</MenuItem> </MenuList> </Menu> </Flex> </HStack> </Flex> ) } const SidebarWithHeader = () => { const { isOpen, onOpen, onClose } = useDisclosure() return ( <Box minH="100vh" bg={useColorModeValue('gray.100', 'gray.900')}> <SidebarContent onClose={() => onClose} display={{ base: 'none', md: 'block' }} /> <Drawer isOpen={isOpen} placement="left" onClose={onClose} returnFocusOnClose={false} onOverlayClick={onClose} size="full"> <DrawerContent> <SidebarContent onClose={onClose} /> </DrawerContent> </Drawer> {/* mobilenav */} <MobileNav onOpen={onOpen} /> <Box ml={{ base: 0, md: 60 }} p="4"> {/* Content */} </Box> ) </Box> ) } export default SidebarWithHeader App.jsx
import { Spinner, Text } from '@chakra-ui/react'; import SidebarWithHeader from "./shared/SideBar.jsx"; import {useEffect, useState} from "react"; import {getCustomers} from "./services/client.js"; const App = () => { const [customers, setCustomers] = useState([]); const [loading, setLoading] = useState(false); useEffect(() => { setLoading(true); getCustomers().then(res => { setCustomers(res.data); }).catch(err => { console.log(err) }).finally(() => { setLoading(false); }) }, []) if(loading){ return ( <SidebarWithHeader> <Spinner thickness='4px' speed='0.65s' emptyColor='gray.200' color='blue.500' size='xl' /> </SidebarWithHeader> ) } if(customers.length <= 0){ return ( <SidebarWithHeader> <Text>No customers available</Text> </SidebarWithHeader> ) } console.log(customers) return ( <SidebarWithHeader> {customers.map((customer, index) => ( <p key={index}>{customer.name}</p> ))} </SidebarWithHeader> ) } export default App; For some reasons, customer data isn’t showing up, i get a blank page. Please how do i access the element that is responsible for displaying content in the App.jsx file. what i've been doing is to make a parent, and add children components within it but it's not working. Please help. Thanks.
1 Answer
SidebarWithHeader, as a wrapper component, should consume and render a children prop, very likely where you've the {/* Content */} comment.
const SidebarWithHeader = ({ children }) => { const { isOpen, onOpen, onClose } = useDisclosure(); const boxBg = useColorModeValue('gray.100', 'gray.900'); return ( <Box minH="100vh" bg={boxBg}> <SidebarContent onClose={onClose} display={{ base: 'none', md: 'block' }} /> <Drawer isOpen={isOpen} placement="left" onClose={onClose} returnFocusOnClose={false} onOverlayClick={onClose} size="full" > <DrawerContent> <SidebarContent onClose={onClose} /> </DrawerContent> </Drawer> {/* mobilenav */} <MobileNav onOpen={onOpen} /> <Box ml={{ base: 0, md: 60 }} p="4"> {children} {/* <-- children is the content */} </Box> </Box> ); }; 
