How to dynamically update child component properties - reactjs

Question

I'm trying to use a video player (that could show any number of different videos) in this lightbox that accepts components as well as images:
lightbox-react
Their docs give a simple example (pasted in below) that overlooks an important detail: a component in the lightbox may need to have parts of its content changed when displayed. So I need understand how to pass properties to the component that's being used for the mainSrc property of the lightbox.
I'm new to React, so I want to learn the right way to manage this. The only syntax I can find that will work for me is, in the parent:
constructor(props) {
super(props);
this.state = {
myVidPlayer: '',
}
}
...
handleLightboxOpen() {
this.setState({
// re-create new video player every time:
myVidPlayer: React.createElement(VidPlayer, { vidSrc: **real video source here** }),
});
}
And in the render of the lightbox for the parent, I simply have <Lightbox mainSrc={this.state.myVidPlayer}...> which does work as needed, but I'm recreating the child component every time the lightbox pops up, which seems wrong.
I tried to do this:
constructor(props) {
super(props);
this.state = {
myVidSrc: '',
}
this.vidPlayer = React.createElement(VidPlayer, { vidSrc: this.state.myVidSrc });
}
...
handleLightboxOpen() {
this.setState({
// does not work, child does not get updated:
myVidSrc: '**real video source here**',
});
}
And in the render of the lightbox for the parent, <Lightbox mainSrc={this.vidPlayer}...> but the child component "vidSrc" prop never gets updated when the parent state variable is changed. I had been under the impression that this should bubble down, but in this case, the prop seems to remain at its initial value.
Their example code is as follows (I'm replacing "VideoIframe" with my own "vidPlayer" per above):
import React, { Component } from 'react';
import Lightbox from 'lightbox-react';
import VideoIframe from 'components/cat-video';
const images = [
VideoIframe,
'//placekitten.com/1500/500',
'//placekitten.com/4000/3000',
'//placekitten.com/800/1200',
'//placekitten.com/1500/1500'
];
export default class LightboxExample extends Component {
constructor(props) {
super(props);
this.state = {
photoIndex: 0,
isOpen: false
};
}
render() {
const {
photoIndex,
isOpen,
} = this.state;
return (
<div>
<button
type="button"
onClick={() => this.setState({ isOpen: true })}
>
Open Lightbox
</button>
{isOpen &&
<Lightbox
mainSrc={images[photoIndex]}
nextSrc={images[(photoIndex + 1) % images.length]}
prevSrc={images[(photoIndex + images.length - 1) % images.length]}
onCloseRequest={() => this.setState({ isOpen: false })}
onMovePrevRequest={() => this.setState({
photoIndex: (photoIndex + images.length - 1) % images.length,
})}
onMoveNextRequest={() => this.setState({
photoIndex: (photoIndex + 1) % images.length,
})}
/>
}
</div>
);
}
}

Answer 1

Thanks for providing that update.
Passing props from a parent to a child component is a fundamental aspect of react and is very important to understand. A simple example of this might look like such;
Child = React.createClass({
render() {
return <div>{this.props.someProp}</div>;
}
});
Parent = React.createClass({
render() {
return <Child someProp={"an example value"}/>;
}
});
Mounting the Parent will now result in <div>an example value</div> being rendered to the display.