title: OpenLayers React JSX Component
body: <p>I have the following React Component that uses Openlayers and it works as expected:</p>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux'
  import PropTypes from 'prop-types'
  import { Card } from 'material-ui'
  import CardBanner from './CardBanner'
  
  
  // Open Layers Imports
  import ol from 'openlayers';
  import 'ol/ol.css';
  
  
  class WebMapService extends React.Component {
      constructor(props) {
          super(props)
  
          this.map = {};
      }
  
  
      componentDidMount() {
  
          this.map = new ol.Map({
              layers: [
                  new ol.layer.Tile({
                      source: new ol.source.OSM()
                  })
              ],
              target: 'map',
              view: new ol.View({
                  center: [0, 0],
                  zoom: 2
              })
          });
  
          // this.map.updateSize();
          // this.map.render();
          // this.map.redraw();
      }
  
  
      render() {
          //if(this.props.contentRender) {      // Conditional Rendering
          return (
              &lt;div&gt;
                  &lt;Card id="WebMapService" className="cardContainerFullScreen"&gt;
  
  
                      &lt;div id="map" className="map" ref="olmap"&gt;&lt;/div&gt;
  
  
                  &lt;/Card&gt;
              &lt;/div&gt;
          )
          //}else{return false}
      }
  }
  
  
  
  WebMapService.propTypes = {
      contentRender: PropTypes.bool
  };
  
  const mapStateToProps = (state) =&gt; {
      return {
          contentRender: state.setWMSComponentStatus.setWMSComponentStatusState
      }
  }
  
  export default connect(mapStateToProps)(WebMapService);
  </code></pre>
  
  <p>When I uncomment the following lines from render() it fails to load:</p>
  
  <pre><code>//if(this.props.contentRender) {
  
  //}else{return false}
  </code></pre>
  
  <p>Purpose of these 2 lines. 
  This React Component is loaded at the point a dashboard is loaded. The component then listens to Redux for a "true" render and then the component renders. </p>
  
  <p>Is there a way to therefore refresh or reload load openlayers in a situation like this. I've tried a few ideas in componentDidMount() like .render() etc.</p>
  
  <p>Note: if there's a better way to load the component on the fly I'd be interested.</p>
  
  <p>thanks</p>