React - How can i update state from other component?

Question

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.

This is my code for:

1st component ( video block )

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: <VideoHook source={this.props.source} />
        });
    },
    render: function() {
        return (
            <div className="nativ-VideoBlockComponent-main">
                <div className="nativ-VideoBlockComponent-main-video">
                    <span ref="button" onClick={this.handleClick} className="nativ-VideoBlockComponent-main-video-button"></span>
                    <div ref="thumbnail" className="nativ-VideoBlockComponent-main-video-thumbnail"></div>
                    {this.state.video}
                </div>
                <div className="nativ-VideoBlockComponent-main-content">
                    <span className="nativ-VideoBlockComponent-main-content-title">Lorem ipsum dolor sit amet</span>
                    <span className="nativ-VideoBlockComponent-main-content-description">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.</span>
                </div>
            </div>
        );
    }
});

2nd component ( list of videos )

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');

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

If any people have a solution or an alternative, thank you in advance

Regards

William

score 3 · Answer 1 · edited May 23 '17 at 12:07

You can create a parent component that stores the state and passes it down as props to the children.

In the parent you keep the video source as state, and pass it down to the video block through props.

In the parent you have a 'changeVideoSource(source)` function that modifies the state. You pass down that handler function to your carousel list to execute when the video is selected. e.g. as a 'videoSourceChangeHandler'.

You may want to consider having the parent component handle more of the state / data loading which can make your child components 'purer' in their handling of props only and not state.

See the suggestion in the docs

or see this stackoverflow question (particularly scenario #2 for code example)

React - How can i update state from other component?

1 Answers1