React - How can i update state from other component?
<p>i have a problem with a react video component, i have 2 component, the first is a video component, he can play youtube video, the second is a list of video element, and when i click on a child of this list, i want to change the video of the first component ( the video component ), but i try since 2 hours to send new props to another component, and i can't do this.</p>

<p>This is my code for:</p>

<p>1st component ( video block )</p>

<pre><code>var VideoMainItem = React.createClass({
    getInitialState: function() {
        return {
            video: null
        };
    },
    handleClick: function() {
        var button = $(this.refs.button);
        var thumbnail = $(this.refs.thumbnail);

        button.hide();
        thumbnail.hide();

        this.setState({
            video: &lt;VideoHook source={this.props.source} /&gt;
        });
    },
    render: function() {
        return (
            &lt;div className="nativ-VideoBlockComponent-main"&gt;
                &lt;div className="nativ-VideoBlockComponent-main-video"&gt;
                    &lt;span ref="button" onClick={this.handleClick} className="nativ-VideoBlockComponent-main-video-button"&gt;&lt;/span&gt;
                    &lt;div ref="thumbnail" className="nativ-VideoBlockComponent-main-video-thumbnail"&gt;&lt;/div&gt;
                    {this.state.video}
                &lt;/div&gt;
                &lt;div className="nativ-VideoBlockComponent-main-content"&gt;
                    &lt;span className="nativ-VideoBlockComponent-main-content-title"&gt;Lorem ipsum dolor sit amet&lt;/span&gt;
                    &lt;span className="nativ-VideoBlockComponent-main-content-description"&gt;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias Excepturi sint occaecati cupiditate non provident.&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        );
    }
});
</code></pre>

<p>2nd component ( list of videos )</p>

<pre><code>var VideoCarousselItem = React.createClass({
    getInitialState: function() {
        return {
            video: this.props.video
        };
    },
    addThumbnail: function(video) {
        return {
            'backgroundImage': 'url(' + asset('assets/images/videoblock/thumbnail_01.jpg') + ')'
        };
    },
    handleClick: function() {
        console.log('VideoCarousselItem::handleClick');

        &lt;VideoMainItem video={this.state.video} /&gt;
    },
    render: function() {
        return (
            &lt;div className="nativ-VideoBlockComponent-caroussel-item"&gt;
                &lt;span className="nativ-VideoBlockComponent-caroussel-item-button"&gt;&lt;/span&gt;
                &lt;div onClick={this.handleClick} className="nativ-VideoBlockComponent-caroussel-item-thumbnail" style={this.addThumbnail(this.state.video)}&gt;&lt;/div&gt;
            &lt;/div&gt;
        );
    }
});
</code></pre>

<p>If any people have a solution or an alternative, thank you in advance</p>

<p>Regards</p>

<p>William</p>