CODEWITHSUNDEEP
javascriptreactjsprop
Le Tuan Anh
Le Tuan Anh

Reputation: 73

Cannot figure out the problem with key and props

I need help with figuring out why when I use a function component, I do not get a warning of this type:

index.js:1446 Warning: Each child in an array or iterator should have a unique "key" prop.

When I use a class component, this warning pops out.

Thank you in advance for clarification.

function component:

import React from 'react';
import VideoItem from './VideoItem';

const VideoList = ({videos, selectedVideo}) =>{
    const renderedItems = videos.map((video) =>{
        return <VideoItem key={video.id.videoId} video={video} selectedVideo={selectedVideo}/>
    })
    return <div>{renderedItems}</div>
}

export default VideoList;

class Component:

import React, { Component } from 'react';
import VideoItem from './VideoItem';

class VideoList extends Component {
    render() { 
        const renderedItems = this.props.videos.map((video) => {
            return <div><VideoItem key={video.id.videoId} video={video} selectedVideo={this.props.selectedVideo}/></div>
        })
        return(
            <div>{renderedItems}</div>
        )
    }
}
 
export default VideoList;

Upvotes: 0

Views: 2207

Answers (4)

mab
mab

Reputation: 387

In React, in a iteration, each iteration root element should have a key attribute.

In your example, you gave key attribute to VideoItem component. That's the wrapping div who should have it.

import React, { Component } from 'react';
import VideoItem from './VideoItem';

class VideoList extends Component {
    render() { 
        const renderedItems = this.props.videos.map((video) => {
            return <div key={video.id.videoId}><VideoItem video={video} selectedVideo={this.props.selectedVideo}/></div>
        })
        return(
            <div>{renderedItems}</div>
        )
    }
}

export default VideoList;

Upvotes: 1

stevejay
stevejay

Reputation: 884

In your class component, the key attribute needs to be on the wrapper div element.

Upvotes: 2

egorchik
egorchik

Reputation: 549

 const renderedItems = this.props.videos.map((video) => {
            return <VideoItem key={video.id.videoId} video={video} selectedVideo={this.props.selectedVideo}/>
        })

key must be on Div or remove it

Upvotes: 2

Kamil Naja
Kamil Naja

Reputation: 6692

Maybe your id is not always unique?

Try this (adding idx in map fn)

const renderedItems = this.props.videos.map((video, idx) => {
     return <div><VideoItem key={idx} video={video} 
     selectedVideo={this.props.selectedVideo}/></div>
})

Upvotes: 0

Related Questions