title: Reactjs change content in div with onclick from another component
body: <p>I am new to react and am having trouble with an issue. </p>
  
  <p>I have one component (film.js) that has a map array of objects, and by clicking on each of them I would like to change the {komponentaFilma}  depending on which one of the elements is clicked.</p>
  
  <p>My logic might be totally wrong so feel free to point me in the right direction thank you.</p>
  
  <p>app.js</p>
  
  <pre><code>      render() {
  
      let komponentaFilma = null;
      if ( this.state.prikaziFilmCont ) {
        komponentaFilma = (
          &lt;div className="trailer_container"&gt;
            &lt;p&gt;Ovo je film koji je kliknut&lt;/p&gt;
          &lt;/div&gt;
        );
      }
  
  
      return (
        &lt;div&gt;
        &lt;div className="movies-container"&gt;
          {this.state.filmovi.map((film, index) =&gt; {
            return &lt;Film
                      naslov={film.naslov}
                      naslovnaSlika={film.naslovnaSlika}
                      key={film.id}
                      openFilm={() =&gt; this.injectFilm(index)}/&gt;
        })}
        &lt;/div&gt;
        &lt;Gallery /&gt;
        {komponentaFilma}
        &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p>i am also using this method in app.js</p>
  
  <pre><code>  injectFilm = (filmIndex) =&gt; {
      const prikaziFilm = this.state.prikaziFilmCont;
      this.setState({prikaziFilmCont: !prikaziFilm})
    }
  </code></pre>
  
  <p>this also has </p>
  
  <pre><code>prikaziFilmCont: false
  </code></pre>
  
  <p>in the state</p>
  
  <p>film.js looks like this</p>
  
  <pre><code>const Film = (props) =&gt; {
    return (
        &lt;div onClick={props.openFilm} className="singleMovie"&gt;
          &lt;h3&gt;{props.naslov}&lt;/h3&gt;
          &lt;img src={props.naslovnaSlika} alt="nova slika "/&gt;
        &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>this is the state in my app.js these objects are clicked on, and i would like to pass info from these object (onclick) to komponenta filma.</p>
  
  <pre><code>  state = {
      filmovi: [
        {
          "naslov": "Safarikova",
          "id": "00",
          "naslovFilma": "Safarikova",
          "godina": "Safarikova",
          "opis": "Lorem ipsum dolor sit ....",
          "naslovnaSlika": "http://dusanmuncan.underconstructioncity.com/srdjan_susa/images/safarikova.png",
          "linkVideo": "http://video/video.mp4",
          "externiLink": "http://www.vimeo.com/video.mp4"
        }, {
          "naslov": "Svetski sampion",
          "id": "01",
          "naslovFilma": "Sampion",
          "godina": "Safarikova",
          "opis": "Cupcake ipsum color sit pinaple juice ....",
          "naslovnaSlika": "http://dusanmuncan.underconstructioncity.com/srdjan_susa/images/trailer_prvaksveta.png",
          "linkVideo": "http://video/videosampoion.mp4",
          "externiLink": "http://www.vimeo.com/videosampion.mp4"
        }, {
          "naslov": "Stolice",
          "id": "02",
          "naslovFilma": "stolicice malene",
          "godina": "stolice ",
          "opis": "sede ljudi na stolicama i na kraju ustanu",
          "naslovnaSlika": "http://dusanmuncan.underconstructioncity.com/srdjan_susa/images/trailer_stolice.png",
          "linkVideo": "http://video/stolice.mp4",
          "externiLink": "http://www.vimeo.com/sto_lice.mp4"
        }
      ],
      prikaziFilmCont: false
    }
  </code></pre>
  
  <p>if you need something more from me please do write.</p>