Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Warning: Each child in a list should have a unique "key" prop. On mapping filtered object/array

So I am making a tab of projects and I keep getting an error in the browser console. Although the page is rendering fine, I keep getting an error on the browser console.

Here is my Multimedia.js page

import { useEffect, useState } from "react";
import { Col, Container, Nav, Row, Tab } from "react-bootstrap";
import ProjectEmpty from "../../components/ProjectEmpty";
import ProjectCard from "../../components/ProjectCard";

export default function Multimedia() {
    const [projMultimedia, setProjMultimedia] = useState();
    const [projKey, setProjKey] = useState(0);
    const [isMultimediaEmpty, setIsMultimediaEmpty] = useState(true);
    const handleProjKeySelect = (e) => setProjKey(e);
    
    useEffect(() => {
        fetch(`${process.env.REACT_APP_API_URL}/project/all`, {
            method: 'GET'
        })
        .then(res => res.json())
        .then(data => {
            setProjMultimedia(data.filter(proj => proj.category === "multimedia"));
        })
    }, []);

    useEffect(() => {
        if (typeof projMultimedia !== 'undefined' && projMultimedia.length !== 0) {
            setIsMultimediaEmpty(false);
        }
        else {
            setIsMultimediaEmpty(true);
        }
    }, [projMultimedia]);

    return (
        <Container fluid id="project-list" className="h-100">
        {isMultimediaEmpty
        ? <ProjectEmpty />
        :
            <Tab.Container id="projNav" defaultActiveKey="0" activeKey={projKey} onSelect={handleProjKeySelect}>
                <Row className="flex-column flex-lg-row">
                    <Col xs={12} lg={2} className="proj-tabs p-0 flex-shrink-1">
                        <Nav className="proj-nav d-lg-flex flex-lg-column">
                            {projMultimedia.map((project, index) => (
                                <Nav.Item>
                                    <Nav.Link eventKey={index}>{project.title}</Nav.Link>
                                </Nav.Item>
                            ))
                            }
                        </Nav>
                    </Col>

                    <Col xs={12} lg={10} className="proj-content px-0">
                        <Tab.Content className="proj-details h-100">
                            {projMultimedia.map((project, index) => (
                                <Tab.Pane eventKey={index} className="h-100"><ProjectCard key={project._id} project={project} /></Tab.Pane>
                            ))
                            }
                        </Tab.Content>
                    </Col>
                </Row>
            </Tab.Container>
        }
        </Container>
    );
}

Basically it fetches data from my API and then filters it based on the category. If it returns a non empty array, it should render the project card. So far it is rendering fine but this error keeps showing on my browser console.
enter image description here

Any idea where I’m wrong?

Tags:

2

Answers


  1. 0

    You need to add a unique key for each <Nav.Item>, like this:

    <Nav className="proj-nav d-lg-flex flex-lg-column">
    {
        projMultimedia.map((project, index) => (
            <Nav.Item key={index}>
                <Nav.Link eventKey={index}>{project.title}</Nav.Link>
            </Nav.Item>
        ))
    }
</Nav>

    Same for <Tab.Pane>:

    {
    projMultimedia.map((project, index) => (
        <Tab.Pane key={index} eventKey={index} className="h-100"><ProjectCard key={project._id} project={project} /></Tab.Pane>
    ))
}
    Login or Signup to reply.
  2. 0

    Inside map loops those returns/renders components, the first component should have an unique key, sometimes just using it’s current index should work but sometimes you’ll need to use some of your array data to make this id unique in the whole page.

    <Nav className="proj-nav d-lg-flex flex-lg-column">
    {
        projMultimedia.map((project, index) => (
            // this is the First component so it should have an unique ID (current loop index in this case)
            <Nav.Item key={index}>
                <Nav.Link eventKey={index}>{project.title}</Nav.Link>
            </Nav.Item>
        ))
    }
</Nav>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search