React / Material-UI detect last ListItem in List - reactjs

Question

I am using material-ui with React. I have a listview that looks like this:
<List>
<Subheader>List Title</Subheader>
<ListItem primaryText="Option One" />
<Divider />
<ListItem primaryText="Option Two" />
<Divider />
<ListItem primaryText="Option Three" />
</List>
There is a divider between each item but none before the first item or after the last. So far so good.
I have just implemented a simple wrapper that renders or does not render a list item based on a user permission. So it looks like this:
<List>
<Subheader>List Title</Subheader>
<Restricted permission={1}>
<ListItem primaryText="Option One" />
</Restricted>
<Divider />
<Restricted permission={2}>
<ListItem primaryText="Option Two" />
</Restricted>
<Divider />
<Restricted permission={4}>
<ListItem primaryText="Option Three" />
</Restricted>
</List>
The Restricted component compares the users permission with the specified one and returns either the child component or null. This all works but obviously retains the dividers if the option is not rendered.
I could wrap the divider within the Restricted component along with the ListItem which in most cases renders what I want but it leaves a divider at the bottom if the last item is not rendered. What I need is a way of saying don't render the divider if this is the last item in the list.
At the moment my plan is to programmatically generate an array of displayable list items and then render this in a loop with the appropriate dividers. But this will mean that I will have to the the decision logic in each component that uses it instead of a single wrapper. That feels wrong.
Is there some aspect of React/material-ui that I have missed that will enable me the achieve what I want in a more elegant way?

Answer 1

I propose the following solution. First move your representation of list to variable
const allOptions = [
{ text: "Option 1", permission: 1 },
{ text: "Option 2", permission: 2 },
{ text: "Option 3", permission: 4 }
]
then use filter to get only permitted options
const permittedOptions = listItems.filter(checkPermission)
use map to create list items
const listItems = permittedOptions.map(option => <ListeItem text={option.text} />)
now put dividers only if there is a next and prev list item
const listItemsWithDividers = [];
listItems.forEach((item, index) => {
listItemsWithDividers.push(item)
if (listItems[index + 1] !== undefined) {
listItemsWithDividers.push(<Divider />)
}
})
and finally render it
<List>
<Subheader>List Title</Subheader>
{listItemsWithDividers}
</List>

Answer 2

A more cost effective approach would look something like this
<div>
<List>
{items.map((item) => (
<div key={item.id}>
<ListItem>
<ListItemText primary={item.name} />
</ListItem>
{item.id !== items.length ? <Divider /> : null}
</div>
))}
</List>
</div>

Answer 3

{items.data.map((item, index) => (
<ListItem button key={index} divider={index < items.length - 1}>
...
</ListItem>
)})