What means each child in the list should have key id

I think i dont understand sth.

I put every where nano id keys but still get error.

react-jsx-dev-runtime.development.js:117 Warning: Each child in a list should have a unique "key" prop.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

Check the render method of Users.

import React from "react";
import {useQuery} from "@apollo/client"
import { ListGroup, Container, Row, Col,Card } from "react-bootstrap";
import {GET_USERS} from "../Queries/Queries"
import { nanoid } from 'nanoid'

function Users() {
    const { loading, error, data}= useQuery(GET_USERS)
    if (loading) return <p>Loading...</p>
    if (error) return <p>Error</p>

     return (
      <Container> 
        {
        data && data.users.map(user=>{ 
            return(
                <>
                <br/>
               
                <Row key={nanoid()}>
                    <Card  key={nanoid()} style={{ width: '6rem' }}>
                        <Card.Img key={nanoid()} variant="top" src={user.avatar} />
                    </Card>
                    <br />
                    <Col key={nanoid()}>
                    <ListGroup key={nanoid()}>
                        <ListGroup.Item key={nanoid()}>Id: {user.id} </ListGroup.Item>
                        <ListGroup.Item key={nanoid()}>Email: {user.email}</ListGroup.Item>
                        <ListGroup.Item key={nanoid()}>Username: {user.username}</ListGroup.Item>
                    </ListGroup>
                    </Col>  
                </Row>
                
                </> 
                )   
            })
        } 
      </Container>
  );
}

export default Users;

>Solution :

The error message is saying that each item it is mapping needs a key so you just need to add one key to the parent container like so

function Users() {
    const { loading, error, data}= useQuery(GET_USERS)
    if (loading) return <p>Loading...</p>
    if (error) return <p>Error</p>

     return (
      <Container> 
        {
        data && data.users.map((user, index)=>{ 
            return(
                <Row key={index}>
                    <Card style={{ width: '6rem' }}>
                        <Card.Img variant="top" src={user.avatar} />
                    </Card>
                    <br />
                    <Col>
                    <ListGroup>
                        <ListGroup.Item>Id: {user.id} </ListGroup.Item>
                        <ListGroup.Item>Email: {user.email}</ListGroup.Item>
                        <ListGroup.Item>Username: {user.username}</ListGroup.Item>
                    </ListGroup>
                    </Col>  
                </Row>
                )   
            })
        } 
      </Container>
  );
}

Instead of adding a parent container to what you had already I just remove dthe JSX tags and the BR. You should add a className to that row to get the desired space instead of using BR.