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 -->
React circa 2020
----------------
In the `onClick` callback, call the [state hook's][1] setter function to update the state and re-render:
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
const Search = () => {
const [showResults, setShowResults] = React.useState(false)
const onClick = () => setShowResults(true)
return (
<div>
<input type="submit" value="Search" onClick={onClick} />
{ showResults ? <Results /> : null }
</div>
)
}
const Results = () => (
<div id="results" className="search-results">
Some Results
</div>
)
ReactDOM.render(<Search />, document.querySelector("#container"))
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
<!-- end snippet -->
[JSFiddle][2]
React circa 2014
----------------
The key is to update the state of the component in the click handler using `setState`. When the state changes get applied, the `render` method gets called again with the new state:
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
var Search = React.createClass({
getInitialState: function() {
return { showResults: false };
},
onClick: function() {
this.setState({ showResults: true });
},
render: function() {
return (
<div>
<input type="submit" value="Search" onClick={this.onClick} />
{ this.state.showResults ? <Results /> : null }
</div>
);
}
});
var Results = React.createClass({
render: function() {
return (
<div id="results" className="search-results">
Some Results
</div>
);
}
});
ReactDOM.render( <Search /> , document.getElementById('container'));
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
<!-- end snippet -->
[JSFiddle][3]
[1]: https://reactjs.org/docs/hooks-state.html
[2]: https://jsfiddle.net/khx30pnv/
[3]: http://jsfiddle.net/kb3gN/15084/
