Самый внешний / родительский элемент, возвращаемый функцией map
, должен иметь key
prop.В вашем случае это не <div>
, а <List>
, что кажется ошибкой, так как кажется, что вы хотите перебрать отфильтрованный результат allServices
, чтобы создать список serviceInfo
.Если это так, вы должны переместить функцию карты чуть выше <ListItem>
и назначить ей key
prop.
Пример кода следующим образом:
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;