title: react component module 'classProperties' isn't currently enabled
body: <p>getting an error when executing my react module</p>
  
  <blockquote>
    <p>'classProperties' isn't currently enabled (44:11):</p>
  </blockquote>
  
  <pre><code> }
    43 |   // componentDidUpdate or try this
  &gt; 44 |   onClick = (e) =&gt; {
       |           ^
    45 |     e.preventDefault();
    46 |      const url = `${this.props.url}`;
    47 |      if(this.props.method === "GET"){
  </code></pre>
  
  <blockquote>
    <p>Add @babel/plugin-proposal-class-properties (<a href="https://git.io/vb4SL" rel="nofollow noreferrer">https://git.io/vb4SL</a>) to
    the 'plugins' section of your Babel config to enable transformation.</p>
  </blockquote>
  
  <p>I tried the solutions still get the error after re building. </p>
  
  <p><a href="https://stackoverflow.com/questions/52237855/support-for-the-experimental-syntax-classproperties-isnt-currently-enabled">Support for the experimental syntax &#39;classProperties&#39; isn&#39;t currently enabled</a></p>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "name": "blahmodule",
    "version": "1.0.0",
    "description": "a fetch module for our project",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
      "build": "./node_modules/.bin/babel src --out-file index.js"
    },
    "peerDependencies": {
      "react": "^16.6.6",
      "react-dom": "^16.6.3",
      "axios": "^0.19.0"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
      "@babel/cli": "^7.4.4",
      "@babel/core": "^7.4.5",
      "@babel/preset-env": "^7.4.5",
      "@babel/preset-react": "^7.0.0",
      "react": "^16.8.6",
      "react-dom": "^16.8.6"
    },
    "devDependencies": {
      "@babel/plugin-proposal-class-properties": "^7.4.4",
      "axios": "^0.19.0"
    }
  }
  </code></pre>
  
  <p><strong>.babelrc</strong></p>
  
  <p>I tried changing the <code>.babelrc</code> to <code>babel.config.js</code> with module.exports, but still no success. also with and without <code>"loose": true</code></p>
  
  <pre><code>{
      "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
      ],
      "plugins": [
          [
            "@babel/plugin-proposal-class-properties",
            {
              "loose": true
            }
          ]
        ]
    }
  </code></pre>
  
  <p>code from the beginning </p>
  
  <pre><code>import React, {Component} from 'react';
  import axios from 'axios';
  
  class MyFetch extends Component {
    constructor(props){
      super(props);
      this.state = {
        data:[],
        startTime:'',
        responseTime:''
      }
  
    }
    componentWillMount(){
     .....
    }
    // componentDidUpdate or try this
    onClick = (e) =&gt; {
      e.preventDefault();
       const url = `${this.props.url}`;
       if(this.props.method === "GET"){
          axios.get(url).then( res =&gt; {
  
            this.setState({
              data: res.data
            })
            console.log(this.state.data)
          })
       }
       else if(this.props.method === "POST"){
          axios.get(url).then( res =&gt; {
            this.setState({
              data: res.data
            })
            console.log(this.state.data)
          })
       }
    }
    render(){
      return (
        &lt;div&gt;
          {this.props.url ? (
           &lt;button onClick={this.onClick}&gt;Get Response Time&lt;/button&gt;
            ):(
                null
            )}
  
         {this.state.responseTime ? (
           &lt;h3&gt;{this.state.responseTime}&lt;/h3&gt;
         ):(
            null
         )}
         &lt;/div&gt;
      );
    }
  }
  
  export default MyFetch;
  </code></pre>