Take advantage of transform-class-properties and use arrow functions instead of bind

src/components/modals/AddModal.jsx

@@ -22,7 +22,7 @@ class AddModal extends React.Component {
     sources: PropTypes.object.isRequired,
   }
 
-  addLayer() {
+  addLayer = () => {
     const changedLayers = this.props.layers.slice(0)
     const layer = {
       id: this.state.id,
@@ -151,7 +151,7 @@ class AddModal extends React.Component {
       }
       <Button
         className="maputnik-add-layer-button"
-        onClick={this.addLayer.bind(this)}
+        onClick={this.addLayer}
         data-wd-key="add-layer"
       >
         Add Layer

src/components/modals/ExportModal.jsx

@@ -21,14 +21,11 @@ class Gist extends React.Component {
     onStyleChanged: PropTypes.func.isRequired,
   }
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      preview: false,
-      public: false,
-      saving: false,
-      latestGist: null,
-    }
+  state = {
+    preview: false,
+    public: false,
+    saving: false,
+    latestGist: null,
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {

src/components/modals/LoadingModal.jsx

@@ -13,10 +13,6 @@ class LoadingModal extends React.Component {
     message: PropTypes.node.isRequired,
   }
 
-  constructor(props) {
-    super(props);
-  }
-
   underlayOnClick(e) {
     // This stops click events falling through to underlying modals.
     e.stopPropagation();

src/components/modals/OpenModal.jsx

@@ -74,7 +74,7 @@ class OpenModal extends React.Component {
     }
   }
 
-  onStyleSelect(styleUrl) {
+  onStyleSelect = (styleUrl) => {
     this.clearError();
 
     const reqOpts = {
@@ -104,12 +104,12 @@ class OpenModal extends React.Component {
     })
   }
 
-  onOpenUrl() {
+  onOpenUrl = () => {
     const url = this.styleUrlElement.value;
     this.onStyleSelect(url);
   }
 
-  onUpload(_, files) {
+  onUpload = (_, files) => {
     const [e, file] = files[0];
     const reader = new FileReader();
 
@@ -146,7 +146,7 @@ class OpenModal extends React.Component {
         url={style.url}
         title={style.title}
         thumbnailUrl={style.thumbnail}
-        onSelect={this.onStyleSelect.bind(this)}
+        onSelect={this.onStyleSelect}
       />
     })
 
@@ -170,7 +170,7 @@ class OpenModal extends React.Component {
       <section className="maputnik-modal-section">
         <h2>Upload Style</h2>
         <p>Upload a JSON style from your computer.</p>
-        <FileReaderInput onChange={this.onUpload.bind(this)} tabIndex="-1">
+        <FileReaderInput onChange={this.onUpload} tabIndex="-1">
           <Button className="maputnik-upload-button"><FileUploadIcon /> Upload</Button>
         </FileReaderInput>
       </section>
@@ -182,7 +182,7 @@ class OpenModal extends React.Component {
         </p>
         <input data-wd-key="open-modal.url.input" type="text" ref={(input) => this.styleUrlElement = input} className="maputnik-input" placeholder="Enter URL..."/>
         <div>
-          <Button data-wd-key="open-modal.url.button" className="maputnik-big-button" onClick={this.onOpenUrl.bind(this)}>Open URL</Button>
+          <Button data-wd-key="open-modal.url.button" className="maputnik-big-button" onClick={this.onOpenUrl}>Open URL</Button>
         </div>
       </section>
 

src/components/modals/SettingsModal.jsx

@@ -15,10 +15,6 @@ class SettingsModal extends React.Component {
     onOpenToggle: PropTypes.func.isRequired,
   }
 
-  constructor(props) {
-    super(props);
-  }
-
   changeStyleProperty(property, value) {
     const changedStyle = {
       ...this.props.mapStyle,

src/components/modals/ShortcutsModal.jsx

@@ -11,10 +11,6 @@ class ShortcutsModal extends React.Component {
     onOpenToggle: PropTypes.func.isRequired,
   }
 
-  constructor(props) {
-    super(props);
-  }
-
   render() {
     const help = [
       {

src/components/modals/SurveyModal.jsx

@@ -12,8 +12,6 @@ class SurveyModal extends React.Component {
     onOpenToggle: PropTypes.func.isRequired,
   }
 
-  constructor(props) { super(props); }
-
   onClick = () => {
     window.open('https://gregorywolanski.typeform.com/to/cPgaSY', '_blank');