data.map not displaying content in React

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…

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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>)
 }
}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0