UI: Fixed missing key tag in Grid

This commit is contained in:
Luis-Hebendanz
2023-08-12 00:15:06 +02:00
parent de9cac534b
commit 2720f47fdb

View File

@@ -200,10 +200,13 @@ function EnhancedTableToolbar(props: EnhancedTableToolbarProps) {
}, [tableData]); }, [tableData]);
const cardData = React.useMemo(() => { const cardData = React.useMemo(() => {
let copy = pieData.filter((pieItem) => pieItem.value > 0); return pieData.filter((pieItem) => pieItem.value > 0).concat(
const elem = { name: 'Total', value: copy.reduce((a, b) => a + b.value, 0), color: '#000000' }; {
copy.push(elem); name: 'Total',
return copy; value: pieData.reduce((a, b) => a + b.value, 0),
color: '#000000'
}
);
}, [pieData]); }, [pieData]);
const cardStack = ( const cardStack = (
@@ -279,7 +282,7 @@ function EnhancedTableToolbar(props: EnhancedTableToolbarProps) {
return ( return (
<Grid2 container spacing={1} sx={debugSx}> <Grid2 container spacing={1} sx={debugSx}>
<Grid2 xs={6}> <Grid2 key="Header" xs={6}>
<Typography <Typography
sx={{ marginLeft: 3, marginTop: 1 }} sx={{ marginLeft: 3, marginTop: 1 }}
variant="h6" variant="h6"
@@ -290,26 +293,26 @@ function EnhancedTableToolbar(props: EnhancedTableToolbarProps) {
</Typography> </Typography>
</Grid2> </Grid2>
{/* Debug Controls */} {/* Debug Controls */}
<Grid2 xs={6} justifyContent="right" display="flex"> <Grid2 key="Debug-Controls" xs={6} justifyContent="right" display="flex">
<FormGroup> <FormGroup>
<FormControlLabel control={<Switch onChange={() => { setDebug(!debug) }} checked={debug} />} label="Debug" /> <FormControlLabel control={<Switch onChange={() => { setDebug(!debug) }} checked={debug} />} label="Debug" />
</FormGroup> </FormGroup>
</Grid2> </Grid2>
{/* Pie Chart Grid */} {/* Pie Chart Grid */}
<Grid2 lg={6} sm={12} display="flex" justifyContent="center" alignItems="center"> <Grid2 key="PieChart" lg={6} sm={12} display="flex" justifyContent="center" alignItems="center">
<Box height={350} width={400}> <Box height={350} width={400}>
<NodePieChart data={pieData} showLabels={matches} /> <NodePieChart data={pieData} showLabels={matches} />
</Box> </Box>
</Grid2> </Grid2>
{/* Card Stack Grid */} {/* Card Stack Grid */}
<Grid2 lg={6} display="flex" sx={{ display: { lg: 'flex', sm: 'none' } }} > <Grid2 key="CardStack" lg={6} display="flex" sx={{ display: { lg: 'flex', sm: 'none' } }} >
{cardStack} {cardStack}
</Grid2> </Grid2>
{/*Toolbar Grid */} {/*Toolbar Grid */}
<Grid2 xs={12}> <Grid2 key="Toolbar" xs={12}>
{isSelected ? selectedToolbar : unselectedToolbar} {isSelected ? selectedToolbar : unselectedToolbar}
</Grid2> </Grid2>