0

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>    
        )
    },
});
1
  • Could you show the MovieResults component? Aug 2, 2016 at 12:50

1 Answer 1

1

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>    
    )
  }
})
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.