Here is a more up to date component you can use. The hashedId is a prop.
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-js -->
import React, {Component} from 'react';
class WistiaEmbed extends Component {
constructor(props) {
super(props);
const {hashedId, ...embedOptions} = {...this.props};
if (typeof window !== `undefined`) {
window._wq = window._wq || [];
window._wq.push({
id: hashedId,
options: embedOptions,
onHasData: (video) => {
this.handle = video;
},
});
}
}
_renderCommon() {
const {hashedId} = this.props;
return (
<div
class="wistia_swatch"
style={{
height: '100%',
left: 0,
opacity: 0,
overflow: 'hidden',
position: 'absolute',
top: 0,
transition: 'opacity 200ms',
width: '100%',
}}
>
<img
src={`https://fast.wistia.com/embed/medias/${hashedId}/swatch`}
style={{filter: 'blur(5px)', height: '100%', objectFit: 'contain', width: '100%'}}
alt=""
aria-hidden="true"
onload="this.parentNode.style.opacity=1;"
/>
</div>
);
}
_renderResponsive() {
const {hashedId, padding} = this.props;
return (
<div className="wistia_responsive_padding" style={{padding, position: 'relative'}}>
<div
className="wistia_responsive_wrapper"
style={{height: '100%', left: '0', position: 'absolute', top: 0, width: '100%'}}
>
<div
className={`wistia_embed wistia_async_${hashedId} videoFoam=true`}
style={{height: '100%', width: '100%', position: 'relative'}}
>
{this._renderCommon()}
</div>
</div>
</div>
);
}
_renderFixed() {
const {width, height, hashedId} = this.props;
return (
<div
class={`wistia_embed wistia_async_${hashedId}`}
style={`height:${height || 480}px;position:relative;width:${width || 640}px`}
>
{this._renderCommon()}
</div>
);
}
render() {
const {isResponsive} = this.props;
return isResponsive ? this._renderResponsive() : this._renderFixed;
}
componentDidMount() {
if (!document.getElementById('wistia_script')) {
var wistiaScript = document.createElement('script');
wistiaScript.id = 'wistia_script';
wistiaScript.type = 'text/javascript';
wistiaScript.src = 'https://fast.wistia.com/assets/external/E-v1.js';
wistiaScript.async = true;
document.body.appendChild(wistiaScript);
}
}
componentWillUnmount() {
this.handle && this.handle.remove();
}
}
WistiaEmbed.defaultProps = {
isResponsive: true,
};
export default WistiaEmbed;
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!-- end snippet -->
That's [*property spread notation*][1]. It was added in ES2018 (spread for arrays/iterables was earlier, ES2015), but it's been supported in React projects for a long time via transpilation (as "[JSX spread attributes][2]" even though you could do it elsewhere, too, not just attributes).
`{...this.props}` *spreads out* the "own" enumerable properties in `props` as discrete properties on the `Modal` element you're creating. For instance, if `this.props` contained `a: 1` and `b: 2`, then
<Modal {...this.props} title='Modal heading' animation={false}>
would be the same as
<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>
But it's dynamic, so whatever "own" properties are in `props` are included.
Since `children` is an "own" property in `props`, spread will include it. So if the component where this appears had child elements, they'll be passed on to `Modal`. Putting child elements between the opening tag and closing tags is just syntactic sugar — the good kind — for putting a `children` property in the opening tag. Example:
<!-- begin snippet: js hide: true console: true babel: true -->
<!-- language: lang-js -->
class Example extends React.Component {
render() {
const { className, children } = this.props;
return (
<div className={className}>
{children}
</div>
);
}
}
ReactDOM.render(
[
<Example className="first">
<span>Child in first</span>
</Example>,
<Example className="second" children={<span>Child in second</span>} />
],
document.getElementById("root")
);
<!-- language: lang-css -->
.first {
color: green;
}
.second {
color: blue;
}
<!-- language: lang-html -->
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!-- end snippet -->
Spread notation is handy not only for that use case, but for creating a new object with most (or all) of the properties of an existing object — which comes up a lot when you're updating state, since you can't modify state directly:
this.setState(prevState => {
return {foo: {...prevState.foo, a: "updated"}};
});
That replaces `this.state.foo` with a new object with all the same properties as `foo` except the `a` property, which becomes `"updated"`:
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
const obj = {
foo: {
a: 1,
b: 2,
c: 3
}
};
console.log("original", obj.foo);
// Creates a NEW object and assigns it to `obj.foo`
obj.foo = {...obj.foo, a: "updated"};
console.log("updated", obj.foo);
<!-- language: lang-css -->
.as-console-wrapper {
max-height: 100% !important;
}
<!-- end snippet -->
[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
[2]: https://reactjs.org/docs/jsx-in-depth.html#spread-attributes
