I am using Fuse for my react application. I have one component with some multiple tab and, inside one of this tab, I want to rendere something similar to the Tasks module available on the Fuse React Material (https://react-material.fusetheme.com/apps/tasks/0fcece82-1691-4b98-a9b9-b63218f9deef). (I do not have a deep knowledge of JS and React).
To do that, I have defined this:
const Root = styled(FusePageSimple)(({ theme }) => ({
'& .FusePageSimple-header': {
backgroundColor: theme.palette.background.paper
}
}));
/**
* The variant tab.
* @author giraand
*/
function VariantTab(props: VariantTabProps) {
const { product } = props;
const routeParams = useParams();
const [rightSidebarOpen, setRightSidebarOpen] = useState(false);
const isMobile = useThemeMediaQuery((theme) => theme.breakpoints.down('lg'));
useEffect(() => {
setRightSidebarOpen(Boolean(routeParams.id));
}, [routeParams]);
/* <VariantApp variants={product !== undefined ? product.variants : null} /> */
/* <VariantsTable variantRows={product !== undefined ? product.variants : null} /> */
return (
<Root
header={<VariantHeader variants={product !== undefined ? product.variants : null} />}
content={<VariantList variants={product !== undefined ? product.variants : null} />}
rightSidebarContent={<VariantSidebarContent />}
rightSidebarOpen={rightSidebarOpen}
rightSidebarOnClose={() => setRightSidebarOpen(false)}
rightSidebarWidth={640}
scroll={isMobile ? 'normal' : 'content'}
/>
);
}
All the elements are correct and filled with data, but, on the page there I cannot see anything. Do you have any idea? I do not see any error on the console.
If I render the elements without Root with the FusePageSimple I can see the data.