Merge 2a0e268 into c805436

uber · Jun 23, 2020 · 009e34c · 009e34c
2 parents c805436 + 2a0e268
commit 009e34c
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/docs/api-reference/react-map-gl-draw/react-map-gl-draw.md b/docs/api-reference/react-map-gl-draw/react-map-gl-draw.md
@@ -180,6 +180,7 @@ class App extends Component {
 
   render() {
     const { viewport } = this.state;
+    const mode = React.useState(new DrawPolygonMode());
     return (
       <MapGL
         {...viewport}
@@ -191,7 +192,7 @@ class App extends Component {
         <Editor
           // to make the lines/vertices easier to interact with
           clickRadius={12}
-          mode={new DrawPolygonMode()}
+          mode={mode}
         />
         {this._renderToolbar()}
       </MapGL>
@@ -205,10 +206,11 @@ class App extends Component {
 This is continuous example extends from the `Basic Example`. Check default [style](https://github.com/uber/nebula.gl/blob/master/modules/react-map-gl-draw/src/style.ts) used in editor for more details.
 
 ```js
+const mode = React.useState(new DrawPolygonMode())
 <Editor
   // to make the lines/vertices easier to interact with
   clickRadius={12}
-  mode={new DrawPolygonMode()}
+  mode={mode}
   featureStyle={({ feature, state }) => {
     if (state === RENDER_STATE.SELECTED) {
       return {

diff --git a/modules/react-map-gl-draw/README.md b/modules/react-map-gl-draw/README.md
@@ -180,6 +180,7 @@ class App extends Component {
 
   render() {
     const { viewport } = this.state;
+    const mode = React.useState(new DrawPolygonMode());
     return (
       <MapGL
         {...viewport}
@@ -191,7 +192,7 @@ class App extends Component {
         <Editor
           // to make the lines/vertices easier to interact with
           clickRadius={12}
-          mode={new DrawPolygonMode()}
+          mode={mode}
         />
         {this._renderToolbar()}
       </MapGL>
@@ -205,10 +206,12 @@ class App extends Component {
 This is continuous example extends from the `Basic Example`. Check default [style](https://github.com/uber/nebula.gl/blob/master/modules/react-map-gl-draw/src/style.ts) used in editor for more details.
 
 ```js
+const mode = React.useState(new DrawPolygonMode());
+
 <Editor
   // to make the lines/vertices easier to interact with
   clickRadius={12}
-  mode={new DrawPolygonMode()}
+  mode={mode}
   featureStyle={({ feature, state }) => {
     if (state === RENDER_STATE.SELECTED) {
       return {
@@ -234,7 +237,7 @@ This is continuous example extends from the `Basic Example`. Check default [styl
     };
   }}
   editHandleShape={'circle'}
-/>
+/>;
 ```
 
 **Advanced example: multiple draw modes and editing drawn features**