Cannot Figure Out The Problem With Key And Props

31 January 2019 - 1 answer

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;

Answer

 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

source: stackoverflow.com

← Previous Post

Cannot Figure Out The Problem With Key And Props

31 January 2019 - 1 answer

Answer

Related Questions