React key item list error, even after I added the required Key

Question

Here is the list container example

import { List, ListItemText, ListItem } from '@mui/material';

import FooterItem from './FooterItem';

const FooterList = ({ title, items }) => {
    return (
        <List>
            {/* HEADING */}
            <ListItem key={title}>
                <ListItemText sx={{ marginLeft: 2 }}>{title}</ListItemText>
            </ListItem>
            {/* LIST */}
            {items.map((item) => {
                return <FooterItem text={item.text} url={item.url} id={item.id}></FooterItem>;
            })}
        </List>
    );
};
export default FooterList;

Here is the list item example with the key on the ListItem component

  import { ListItemText, ListItem, ListItemButton } from '@mui/material';
const FooterItem = ({ id, text, url }) => {
    console.log(id);
    return (
        <ListItem key={id}>
            <ListItemButton>
                <ListItemText href={url} sx={{ color: 'white', marginTop: '0' }}>
                    {text}
                </ListItemText>
            </ListItemButton>
        </ListItem>
    );
};

export default FooterItem;

As you can see even after adding the key to ListItem the console is showing react key item list error.

Answer 1

[Update]

Based on your updated question here is what you need to change inside your FooterList i.e. list container component.

import { List, ListItemText, ListItem } from '@mui/material';

import FooterItem from './FooterItem';

const FooterList = ({ title, items }) => {
    return (
        <List>
            {/* HEADING */}
            <ListItem key={title}>
                <ListItemText sx={{ marginLeft: 2 }}>{title}</ListItemText>
            </ListItem>
            {/* LIST */}
            {items.map((item, index) => {
                return <FooterItem text={item.text} url={item.url} key={item.id} />;
            })}
        </List>
    );
};
export default FooterList;

And you can remove key={id} from your ListItem component. If despite adding key in your FooterList component, you are getting the error means the value you are providing as a key might not be unique so you can use index as a key which should be unique. But be aware of some pitfalls of using index as a key as it might give you unexpected behavior in some cases. Anyways from what I see your code can easily survive using index as a key so no problem. But in general practice you should not use index as a key and always use unique key for it.

[Old]

Based on the code you provided, I can see that you have applied the key attribute to ListItemButton which here is not the cause of the error you are getting inside console. The problem is with the calling component i.e, from the component you are rendering FooterItem by adding it.

So suppose you have a parent component where you are looping through items and rendering FooterItem inside that loop here is what you should be doing.

For example you have HomePage component and inside that you are including your FooterItem component. The code should look like this.

HomePage component

const HomePage = () => {
    return (
        {footerItems.map((item, index) => {
            return <FooterItem key={index} text={item.text} url={item.url}>
        })}
    )
}

Note that here I have added key attribute to the parent component from where FooterItem is getting called and not in the FooterItem itself.

I hope this helps. This was based on the details you provided. If you are still facing problem, would you mind posting some portion of parent component where you are including FooterItem so I can help you in better way.