React Component requires a unique key prop - reactjs

Question

I made an create component that renders everything that looks good, but when I do console in browser, it has below error.
index.js:2178 Warning: Each child in an array or iterator should have
a unique "key" prop.
I tried to have the key props but still has this error. Please see my code below and advise! Thank you very much.
const serviceList = (props) => (
<CardBody style={{ backgroundImage: `url(${ServiceBgImg})` }}>
<div>
<h3 style={{ fontWeight: 'bold' }}
>{props.groupName}</h3>
{props.allServices.filter(groupedServices => groupedServices.category === props.groupName)
.map(serviceInfo =>
<List component='nav'>
<ListItem>
<ListItemText primary={
<div key={serviceInfo.id}>
<h5 style={{ fontWeight: 'bold' }}>
<span>{serviceInfo.service}</span>
<span
style={{ float: 'right' }}
>{serviceInfo.price}</span>
</h5>
<h5>
{serviceInfo.description}
</h5>
</div>
}
/>
</ListItem>
</List>
)
}
</div>
</CardBody>
);
export default serviceList;

Answer 1

Your List component should wrap the map function, and inside that you add the key to mapped ListItems:
<List component='nav'>
...
.map((serviceInfo, index) =>
<ListItem key={index}>
...
</ListItem>
....

Answer 2

The outermost/parent element returned by the map function needs to have a key prop. In your case, it is not the <div> but <List>, which seems to be a mistake as it seems you wanted to loop over a filtered result of allServices to create a list of serviceInfo. If that's the case, you should move the map function just above the <ListItem> and assign key prop to it.
Code example as follow:
const serviceList = (props) => (
<div>
<h3 style={{ fontWeight: 'bold' }}>{props.groupName}</h3>
<List component='nav'>
{props.allServices.filter(groupedServices => groupedServices.category === props.groupName).map(serviceInfo =>
<ListItem key={serviceInfo.id}>
<ListItemText primary={
<div key={serviceInfo.id}>
<h5 style={{ fontWeight: 'bold' }}>
<span>{serviceInfo.service}</span>
<span
style={{ float: 'right' }}
>{serviceInfo.price}</span>
</h5>
<h5>{serviceInfo.description}</h5>
</div>
}/>
</ListItem>)}
</List>
</div>);
export default serviceList;