map function and key props error in react js

so im new with reactjs , heres the code

const projectDetails=[
        {
            image:assestObj.skullcandyLogo,
            title:"Skullcandy",
            desc:"A focused Web Developer building Websites "
        },
        {
            image:assestObj.skullcandyLogo,
            title:"Skullcandy2",
            desc:"Desc2"
        }
    ]
    return(
        <div id="project-container">
            <p id="project-p">Projects</p>

        {projectDetails.map((elem,index)=>{
        return <div id="project-section">
                <div id="project-img">
                    <img src={elem.image} id="project-logo" key={`img-${index}`} alt="skullcandy" />  
                 </div>
                <div id="project-texts">
                    <p id="project-title" key={`p-${index}`}> {elem.title} </p>
                    <p id="project-desc" key={`p1-${index}`}> {elem.desc} </p>
                </div>
            </div>
            })}
        </div>
    )
}

const projectDetails=[
        {
            image:assestObj.skullcandyLogo,
            title:"Skullcandy",
            desc:"A focused Web Developer building Websites "
        },
        {
            image:assestObj.skullcandyLogo,
            title:"Skullcandy2",
            desc:"Desc2"
        }
    ]
    return(
        <div id="project-container">
            <p id="project-p">Projects</p>

        {projectDetails.map((elem,index)=>{
        return <div id="project-section">
                <div id="project-img">
                    <img src={elem.image} id="project-logo" key={`img-${index}`} alt="skullcandy" />  
                 </div>
                <div id="project-texts">
                    <p id="project-title" key={`p-${index}`}> {elem.title} </p>
                    <p id="project-desc" key={`p1-${index}`}> {elem.desc} </p>
                </div>
            </div>
            })}
        </div>
    )
}

the error is in image

6 Replies

Jochem•3mo ago

I'm unfamiliar with React, but I'm guessing you're missing the key property on #project-section

vic•3mo ago

Thanks it does work But I have 2 more divs but it doesn't ask for key , but why it asks for this main div ?

Jochem•3mo ago

because it's the direct descendent of the loop it needs to be able to reference the main descendent easily

vic•3mo ago

Oh I see Thanks

Jochem•3mo ago

yup, glad to help!

vic•3mo ago

Yep

Gaming

Programming

map function and key props error in react js