I'm trying to make a list with MUI, I'm getting the list in console.log but nothing is shown no errors no data only the console.log.
This is a sample of the data I receive:
[
{
"id": 0,
"navn": "Til rådighed",
"beloeb": 20000,
"tilhors_id": null,
"title": 0,
"subtotal": 0
},
{
"id": 1,
"navn": "før bryllup",
"beloeb": 0,
"tilhors_id": null,
"title": 1,
"subtotal": 0
},
{
"id": 2,
"navn": "Invitationer",
"beloeb": 0,
"tilhors_id": 1,
"title": 0,
"subtotal": 0
},
{
"id": 3,
"navn": "Subtotal før bryllup",
"beloeb": 0,
"tilhors_id": 1,
"title": 0,
"subtotal": 1
},
{
"id": 4,
"navn": "til bryllup",
"beloeb": 0,
"tilhors_id": null,
"title": 1,
"subtotal": 0
}
]
and here is my map
function:
const listItems = (id) => {
console.log(liste)
if (liste === []) {
getList()
} else {
liste.map((l) => {
if (id === l.tilhors_id) {
console.log(l)
return (
<List
sx={{ width: '100%', maxWidth: 500, bgcolor: 'white' }}
component="nav"
aria-labelledby="nested-list-subheader"
subheader={
<ListSubheader component="div" id="nested-list-subheader">
{l.navn}
</ListSubheader>
}
key={l.id}
>
<ListItemButton onClick={handleClick}>
<ListItemText primary={l.navn} />
{open ? <ExpandLess /> : <ExpandMore />}
</ListItemButton>
{!l.subtotal ? (
<Collapse in={open} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
<ListItemButton sx={{ pl: 4 }} onClick={handleClick}>
<div>{l.navn} {l.beloeb}</div>
<ListItemText primary="Starred" />
<Button>X</Button>
</ListItemButton>
</List>
</Collapse>) :
(<ListItemButton>
<ListItemText primary={l.navn} />
</ListItemButton>)}
</List>
)
}
})
}
}
I tried putting it in Codesandbox without the map and it showed it as it was meant to, I'm lost here because I don't get any error just a blank page...
CodePudding user response:
map
with a condition is not ideal in most cases. If we don't handle it with all proper returns, the list will return with some undefined
values. You can check below implementation
const data = [
{
"id": 0,
"navn": "Til rådighed",
"beloeb": 20000,
"tilhors_id": null,
"title": 0,
"subtotal": 0
},
{
"id": 1,
"navn": "før bryllup",
"beloeb": 0,
"tilhors_id": null,
"title": 1,
"subtotal": 0
},
{
"id": 2,
"navn": "Invitationer",
"beloeb": 0,
"tilhors_id": 1,
"title": 0,
"subtotal": 0
},
{
"id": 3,
"navn": "Subtotal før bryllup",
"beloeb": 0,
"tilhors_id": 1,
"title": 0,
"subtotal": 1
},
{
"id": 4,
"navn": "til bryllup",
"beloeb": 0,
"tilhors_id": null,
"title": 1,
"subtotal": 0
}
]
const result = data.map(item => {
if(item.id === 2) {
return item
}
})
console.log(result)
If you only want to render data that matched your condition, you can have filter
before calling map
for rendering instead. And after all, you need to assign values back like below
liste = liste.filter((l) => l.tilhors_id === id).map((l) => <List key={l.id}>
...
</List>)
Full possible implementation
const listItems = (id) => {
console.log(liste)
if (liste === []) {
getList()
} else {
liste = liste.filter((l) => l.tilhors_id === id).map((l) => <List
sx={{ width: '100%', maxWidth: 500, bgcolor: 'white' }}
component="nav"
aria-labelledby="nested-list-subheader"
subheader={
<ListSubheader component="div" id="nested-list-subheader">
{l.navn}
</ListSubheader>
}
key={l.id}
>
<ListItemButton onClick={handleClick}>
<ListItemText primary={l.navn} />
{open ? <ExpandLess /> : <ExpandMore />}
</ListItemButton>
{!l.subtotal ? (
<Collapse in={open} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
<ListItemButton sx={{ pl: 4 }} onClick={handleClick}>
<div>{l.navn} {l.beloeb}</div>
<ListItemText primary="Starred" />
<Button>X</Button>
</ListItemButton>
</List>
</Collapse>) :
(<ListItemButton>
<ListItemText primary={l.navn} />
</ListItemButton>)}
</List>)
}
}