DenayM DenayM - 4 months ago 96
React JSX Question

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `MovieResults`

I can not go to the Move.js page to page Details.js

I do not understand why I have this response : Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of

MovieResults


Movie.js :

var Movie = React.createClass({
render: function(){
var link = 'http://www.imdb.com/title/' + this.props.movie.imdbID;
var myLink = 'search/' + this.props.movie.imdbID;

return(
<div className="well">
<div className="row">
<h4 className="text-center">
<Link to={myLink} activeClassName="current">{this.props.movie.Title}</Link>
</h4>
</div>


</div>
)
},
});


Details.js :

var Details = React.createClass({
render: function(){

var link = 'http://www.imdb.com/title/' + this.props.movie.imdbID;

var title = this.props.movie.Title;
var year = this.props.movie.Year;
var type = this.props.movie.Type;
var poster = this.props.movie.Poster;
var imdbID = this.props.movie.imdbID;

return(
<div className="well">
<div className="row">
<div className="col-md-4">
<img className="thumbnail" src={poster} />
</div>
<div className="col-md-8">
<h4><a href={this.props.movie.Title}> {title}</a></h4>
<ul className="padding">
<li className="list-group-item">Type : {type}</li>
<li className="list-group-item">Year Released : {year}</li>
<li className="list-group-item">Id imdb : {imdbID}</li>
</ul>
<a className="btn btn-primary" href={link}>View on IMDB</a>
</div>
</div>
<Movie movie={this.props.Details} key={i} />
</div>
)
},
});

Answer

DOCS

The key should always be supplied directly to the components in the array, not to the container HTML child of each component in the array

So... Add key attribute to the first child <div>

var MovieResults = React.createClass({
  render: function(){
    return(
      <div>
        <h3 className="text-center"> Results </h3>
        {
          this.props.movies.map(function(movie, i){
            return(
              <div key={i}>
                <Movie movie={movie}/>
              </div>
            )
          })
        }
      </div>    
    )
  }
})
Comments