Не могу разобраться в проблеме с ключом и реквизитом

Question

Мне нужна помощь в выяснении того, почему при использовании компонента функции я не получаю предупреждение такого типа:

index.js: 1446 Предупреждение: каждый дочерний элемент в массиве или итераторедолжен иметь уникальный «ключ» проп.

Когда я использую компонент класса, выдается это предупреждение.

Заранее спасибо за разъяснения.

функциякомпонент:

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;

Класс компонента:

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;

Answer 1

В React на итерации каждая итерация корневой элемент должен иметь атрибут ключа.

В вашем примере вы задали атрибут ключа компоненту VideoItem.Это должен быть оберточный div.

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;

Answer 2

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

ключ должен быть на Div или удалить его

Answer 3

В вашем компоненте класса атрибут key должен находиться в элементе оболочки div.

Answer 4

Может быть, ваш идентификатор не всегда уникален?

Попробуйте это (добавив idx в карту fn)

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