title: `The 'async' modifier can only be used in TypeScript files.ts(8009)` error when using async in react.js
body: <p>So when I try to add <code>async/await</code> in the react file, I got this error: </p>
  
  <pre><code>The 'async' modifier can only be used in TypeScript files.ts(8009)
  </code></pre>
  
  <p>Does that mean I cannot use <code>async/await</code> in React or that is a problem of vs code or what can I do to enable it?</p>
  
  <p>Here is the whole file: </p>
  
  <pre><code>import React from 'react'
  import Button from 'react-bootstrap/Button'
  import {addOrder} from '../actions/orderAction'
  import {connect} from 'react-redux'
  
  class Dish extends React.Component{
  
      async handleClick = (dish) =&gt;{
       this.props.addOrder(dish)
       localStorage.setItem("order", this.props.order)
       alert(`${dish.name} added to your order!`)
      }
  
  
      render(){
        let dish = this.props.dish  
          return(
          &lt;div className="col-4"&gt;  
              &lt;img /&gt;
              &lt;h5&gt;{dish.name}         ${dish.price}&lt;/h5&gt;
              &lt;Button onClick = {()=&gt;this.handleClick(dish)} size="sm" variant="primary"&gt;Order&lt;/Button&gt; 
          &lt;/div&gt;
      )
    }
  }
  
  const mapDispatchToProps = dispatch =&gt;{
      return {
          addOrder: (dish) =&gt;dispatch(addOrder(dish))
      }
  }
  
  const mapStateToProps = state =&gt;{
      return{
          order: state.order
      }
  }
  
  
  export default connect(null,mapDispatchToProps)(Dish)
  
  </code></pre>
  
  <p>Thanks!</p>