I have an array filled with data object. I have a grid system with inside an array.map function that produces cards that display the data inside of each object in the array. As a ket I set the index of each object inside the array( I even tried with using the doc file as a key but gives same result)

My Grid isn't rendered and in the console I get this error

index.js:1 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `GridSystem`

If I console.log the map function and print the index I get 0,1 (because I have only two element)

So I can't find what is the problem

 <GridSystem colCount={2} md={6}>
                  {
                    myActivityList.map((card, index) => {
                        console.log(index);
                        <div className="card" key={index}>
                            <img
                                key={index}
                                className="rounded-circle"
                                alt="image"
                                src={card.Photo}
                                height={50}
                                width={50}
                            />
                            <div className="card-body">
                                <h5 className="card-title">{card.Title}</h5>
                                <small className="card-text text-sm-center text-muted">
                                    {card.Description}
                                </small>
                            <br />
                            <button
                                //onClick={() => openActivityPage(card.activityId,card.Users,card.Partecipants)}
                                className="btn btn-sm partecipate btn-primary"
                            >
                                Partecipa
                            </button>
                            </div>
                        </div>
                    })
                  }
                </GridSystem>

Thanks for your help and time!

CodePudding user response：

You have to return inside your map statement .... so your code should look like

 myActivityList.map((card, index) => {
                        console.log(index);
                        return <div className="card" key={index}>