title: OpenLayers Draw modules in React components doesn't update the map
body: <p>I'm working on an OpenLayers map that uses React as a wrapper for all the other UI stuff. As such, I'm also trying to component-ize some of the features, in this case the drawing. </p>
  
  <p>Below is an attempt to recreate the example found in the <a href="https://openlayers.org/en/latest/examples/draw-features.html" rel="nofollow noreferrer">OpenLayers documentation</a>. What happens is that I get the draw surface, it does the drawing, but then once the drawing has been completed, nothing shows on the map. </p>
  
  <p>I also have a living example of the behavior in a <a href="https://codesandbox.io/s/l3jz05lll" rel="nofollow noreferrer">codesandbox</a>.</p>
  
  <p><strong>MapComponent</strong></p>
  
  <pre><code>import React, { Component, createRef } from "react";
  import ReactDOM from "react-dom";
  import Map from "ol/Map";
  import View from "ol/View";
  import OSM from "ol/source/OSM";
  import TileLayer from "ol/layer/Tile";
  import DrawingComponent from "./DrawingComponent";
  
  class MapComponent extends Component {
    mapDomRef;
    map;
  
    constructor(...args) {
      super(...args);
      this.mapDomRef = createRef();
      this.map = new Map();
    }
  
    componentDidMount() {
      const view = new View({
        center: [-11000000, 4600000],
        zoom: 4
      });
  
      const rasterLayer = new TileLayer({
        source: new OSM()
      });
  
      this.map.addLayer(rasterLayer);
      this.map.setTarget(this.mapDomRef.current);
      this.map.setView(view);
    }
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;div ref={this.mapDomRef} /&gt;
  
          &lt;DrawingComponent map={this.map} /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>DrawingComponent</strong></p>
  
  <pre><code>import React, { Component } from "react";
  import ReactDOM from "react-dom";
  import Draw from "ol/interaction/Draw";
  import { Vector as VectorSource } from "ol/source";
  import { Vector as VectorLayer } from "ol/layer";
  
  class DrawingComponent extends Component {
    state = {
      geomType: "None"
    };
  
    constructor(...args) {
      super(...args);
      this.source = new VectorSource({ wrapX: false });
      this.layer = new VectorLayer({ source: this.source });
    }
  
    handleGeomChange = event =&gt; {
      const geomType = event.target.value;
      this.setState(({ draw }) =&gt; {
        if (draw) {
          this.props.map.removeInteraction(draw);
        }
  
        return { geomType, draw: this.addInteraction(geomType) };
      });
    };
  
    addInteraction(geomType) {
      if (geomType !== "None") {
        const draw = new Draw({
          source: this.source,
          type: geomType
        });
  
        this.props.map.addInteraction(draw);
        return draw;
      }
    }
  
    render() {
      return (
        &lt;form class="form-inline"&gt;
          &lt;label&gt;Geometry type &amp;nbsp;&lt;/label&gt;
          &lt;select
            id="type"
            value={this.state.geomType}
            onChange={this.handleGeomChange}
          &gt;
            &lt;option value="Point"&gt;Point&lt;/option&gt;
            &lt;option value="LineString"&gt;LineString&lt;/option&gt;
            &lt;option value="Polygon"&gt;Polygon&lt;/option&gt;
            &lt;option value="Circle"&gt;Circle&lt;/option&gt;
            &lt;option value="None"&gt;None&lt;/option&gt;
          &lt;/select&gt;
        &lt;/form&gt;
      );
    }
  }
  
  export default DrawingComponent;
  </code></pre>
  
  <p>EDIT: Applied suggestion to use the same source that's on the map, which meant, to also add the layer, which I wasn't doing before. </p>