title: Component render triggered, but DOM not updated
body: <p>I'm having problems with my first React application.
  In practice, I have a hierarchy of components (I'm creating a multimedia film gallery) which, upon clicking on a tab (represented by the Movie component) must show the specific description of the single film (SingleMovieDetails).
  The problem is that the DOM is updated only on the first click, then even if the SingleMovieDetails props change, the DOM remains locked on the first rendered movie.</p>
  
  <p>Here's the code i wrote so far...</p>
  
  <pre><code>//Movie component
  import React from "react";
  import styles from "./Movie.module.scss";
  import PropTypes from "prop-types";
  
  class Movie extends React.Component{
    constructor(props){
      super(props);
      this.imgUrl = `http://image.tmdb.org/t/p/w342/${this.props.movie.poster_path}`;
    }
  
    render(){
      if(!this.props.size)
      return &lt;div onClick={this.props.callbackClick(this.props.movie.id)}
                  name={this.props.movie.id}
                  className={styles.movieDiv}
                  style={{backgroundImage: `url(${this.imgUrl})`}}&gt;&lt;/div&gt;;
      return &lt;div onClick={() =&gt; this.props.callbackClick(this.props.movie.id)}
                  name={this.props.movie.id}
                  className={styles.movieDivBig}
                  style={{backgroundImage: `url(${this.imgUrl})`}}&gt;&lt;/div&gt;;
    }
  }
  
  Movie.propTypes = {
    movie: PropTypes.any,
    callbackClick: PropTypes.any
  };
  export default Movie;
  
  </code></pre>
  
  <p>SingleMovieDetails.js</p>
  
  <pre><code>import React from "react";
  import styles from "./SingleMovieDetails.module.scss";
  
  import Movie from "../Movie";
  import SingleMovieDescription from "../SingleMovieDescription";
  import MovieCast from "../MovieCast";
  import SingleMovieRatings from "../SingleMovieRatings";
  
  class SingleMovieDetails extends React.Component{
    constructor(props){
      super(props);
      console.log(props);
      this.state = props;
      console.log('constructor', this.state.movie)
    }
  
    render(){
      console.log('SMD', this.state.movie)
      return (
          &lt;&gt;
            &lt;div className={styles.container}&gt;
              &lt;div className={styles.flayer}&gt;
                 &lt;Movie size={'big'} movie={this.state.movie}/&gt;
              &lt;/div&gt;
              &lt;div className={styles.description}&gt;
                &lt;SingleMovieDescription movie={this.state.movie}/&gt;
                &lt;MovieCast&gt;&lt;/MovieCast&gt;
              &lt;/div&gt;
              &lt;div className={styles.ratings}&gt;
                &lt;SingleMovieRatings /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/&gt;
      );
    }
  }
  
  export default SingleMovieDetails;
  
  </code></pre>
  
  <p>MovieCarousel.js</p>
  
  <pre><code>import React from "react";
  import PropTypes from "prop-types";
  import Movie from "../Movie";
  import styles from "./MovieCarousel.module.scss";
  import SingleMovieDetails from "../SingleMovieDetails";
  
  class MovieCarousel extends React.Component {
    constructor(props) {
      super(props);
      this.state = [];
      this.callbackClickMovie = this.callbackClickMovie.bind(this);
    }
  
    callbackClickMovie(id) {
      const singleMovieApi = `https://api.themoviedb.org/3/movie/${id}?api_key=b6f2e7712e00a84c50b1172d26c72fe9`;
      fetch(singleMovieApi)
        .then(function(response) {
          return response.json();
        })
        .then(data =&gt; {
          this.setState({ selected: data });
        });
    }
  
    render() {
      let details = null;
      if (this.state.selected) {
        details = &lt;SingleMovieDetails movie={this.state.selected} /&gt;;
      }
      let counter = 6;
      let movies = this.props.movies.map(el =&gt; {
        let element = (
          &lt;Movie movie={el} callbackClick={this.callbackClickMovie} /&gt;
        );
        counter--;
        if (counter &gt;= 0) return element;
        return;
      });
      let content = (
        &lt;&gt;
          &lt;h2 className={styles.carouselTitle}&gt;{this.props.title}&lt;/h2&gt;
          {movies}
          {details}
        &lt;/&gt;
      );
      return content;
    }
  }
  
  MovieCarousel.propTypes = {
    children: PropTypes.any
  };
  export default MovieCarousel;
  
  </code></pre>
  
  <p>I would be really grateful if someone could help me. I have been on it for two days but I can't really deal with it</p>