Each child in a list should have a unique "key" prop. Check render method

Question

Hi so I am pretty new to programming and I got kinda stuck with a problem. I've built an interface with array of objects and with property 'id'. I used it (id: property) as my Unique key but it gives me an error. Thats's the interface

export interface IState {
  meetupsy: {
      id: number
  }[]
}

and that's a List component

import classes from './MeetupList.module.css'
import { IState as Props } from '../../App'
import Card from '../ui/Card'

interface IProps {
    meetups: Props['meetupsy']
}

const MeetupList: React.FC<IProps> = ({meetups}) => {

    const renderList = ():JSX.Element[] => {
        return meetups.map((meetup) => {
            return <Card>
                <li key={meetup.id} className={classes.list}>
                    <div className={classes.image} />
                </li>
            </Card>
        })
    }

    return (
        <ul className={classes.render}>
            {renderList()}
        </ul>
    )
}

export default MeetupList;

I am really puzzled it says "Check the render method of MeetupList"

Answer 1

This question was answered multiple times.

Each of the elements you are iterating through must have a key property that must be put in the outermost element and must be unique.

const renderList = (): JSX.Element[] =>
  meetups.map((meetup) => (
    <Card key={meetup.id}>
      ...
    </Card>
  ));