0

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
      image: string
      title: string
      address: string
      description: string
  }[]
}

and thats 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}>
                <img src={meetup.image} alt={meetup.title} />
                </div>
                <div className={classes.listheader}>
                    <h3>{meetup.title}</h3>
                    <address>{meetup.address}</address>
                    <p>{meetup.description}</p>
                </div>  
                <div className={classes.actions}>
                    <button>To Favorite</button>
                </div>
            </li>
            </Card>
            )
        })
    }

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

export default MeetupList;

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

Kvrxl
  • 3
  • 1
  • 2
  • 1
    The key needs to be on the outermost element in your `map` callback. So the `Card`, not the `li`. – Brian Thompson Mar 31 '22 at 19:40
  • Does this answer your question? [Each child in an array or iterator should have a unique "key" prop (Using Rails with React )](https://stackoverflow.com/questions/49585944/each-child-in-an-array-or-iterator-should-have-a-unique-key-prop-using-rails) – Omama Zainab Apr 02 '22 at 11:51

1 Answers1

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>
  ));
Tarek Hammami
  • 840
  • 9
  • 12