title: React Class is throwing a compile error regading function classs using TypeScript
body: <p>I have a react object that I am trying to convert from a fucntion to a class in order to save the state and bind certain functions that I want to pass to child components. I am getting an error that causes it ot not compile. </p>
  
  <p>React Component that I am trying to create with the state and functions that will be passed into the WidgetTile objects. </p>
  
  <pre><code>import React from "react";
  ...
  
  export default class WidgetToolbar extends React.Component{
      constructor(props){
          super(props)
          this.state={
              targetBox:null,
          };
          this.dragStart = this.dragStart.bind(this);
          this.dragEnd = this.dragEnd.bind(this);
          this.drop = this.drop.bind(this);
      };
  
  
      const isOpen = useBehavior(mainStore.isWidgetToolbarOpen);
      const themeClass = useBehavior(mainStore.themeClass);
  
      const userDashboards = useBehavior(dashboardStore.userDashboards);
  
      const [filter, setFilter] = useState("");
      const [sortOrder, setSortOrder] = useState&lt;SortOrder&gt;("asc");
  
      const userWidgets = useMemo(() =&gt; {
          let _userWidgets = values(userDashboards.widgets).filter((w) =&gt; w.widget.isVisible);
  
          if (sortOrder === "asc") {
              _userWidgets.sort((a, b) =&gt; a.widget.title.localeCompare(b.widget.title));
          } else {
              _userWidgets.sort((a, b) =&gt; b.widget.title.localeCompare(a.widget.title));
          }
          if (!isBlank(filter)) {
              _userWidgets = _userWidgets.filter((row) =&gt; {
                  return row.widget.title.toLowerCase().includes(filter.toLocaleLowerCase());
              });
          }
          return _userWidgets;
      }, [userDashboards, sortOrder, filter]);
  
      dragStart = (e) =&gt; {
          // this is initiated whenthe drag starts.
          console.log(e.target.id);
          console.log('drag start');
          this.setState({
              targetbox: true,
              selectedId: e.target.id
          });
          this.createPopup();
          e.dataTransfer.setData("text", e.target.id);
      }
  
      dragEnd = (e) =&gt; {
          // the following is activated when the drag is ended
          console.log('ended drag');
          this.setState({
              targetBox:null
          });
          this.destroyPopup();
      }
  
      drop = (e) =&gt; {
          console.log("end drag dt: " + e.dataTransfer.getData("text"));
          console.log("end drag t:" + e.target.id);
          console.log('set start: ' + this.state.iterating);
      }
  
      createPopup = () =&gt; {
          console.log("create Popup");
      }
  
      destroyPopup = () =&gt; {
          console.log("destroy popup");
      }
  
      render(){
          return(
              &lt;Overlay
                  isOpen={isOpen}
                  hasBackdrop={false}
                  canOutsideClickClose={true}
                  canEscapeKeyClose={true}
                  onClose={mainStore.closeWidgetToolbar}
                  className={Classes.OVERLAY_SCROLL_CONTAINER}
              &gt;
                  &lt;div className={classNames(styles.toolbar, className, themeClass)} data-element-id="widgets-dialog"&gt;
                      &lt;h3 className={styles.toolbarTitle}&gt;Widgets&lt;/h3&gt;
                      &lt;div className={styles.toolbarMenu}&gt;
                          &lt;InputGroup
                              placeholder="Search..."
                              leftIcon="search"
                              round={true}
                              // TODO - Implement mainstore widget filter
                              // onChange={handleStringChange(this.mainStore.setWidgetFilter)}
                              value={filter}
                              onChange={handleStringChange(setFilter)}
                              data-element-id="widget-search-field"
                          /&gt;
                          &lt;SortButton order={sortOrder} onClick={setSortOrder} /&gt;
                          &lt;Button minimal icon="pin" /&gt;
                          &lt;Button minimal icon="cross" onClick={mainStore.closeWidgetToolbar} /&gt;
                      &lt;/div&gt;
                      &lt;hr /&gt;
  
                      &lt;div className={Classes.DIALOG_BODY}&gt;
                          &lt;div className={styles.buttonBar}&gt;
                              &lt;Button text="Prev" icon="caret-left" small={true} disabled={true} /&gt;
                              &lt;span className={styles.currentPage}&gt;Page 1&lt;/span&gt;
                              &lt;Button text="Next" icon="caret-right" small={true} disabled={true} /&gt;
                          &lt;/div&gt;
                          &lt;ul className={styles.widgetList}&gt;
                              {userWidgets.map((userWidget) =&gt; (
  
                                  &lt;li key={userWidget.id}&gt;
                                      &lt;UserWidgetTile 
                                          userWidget={userWidget} 
                                          dragStart={this.dragStart}
                                          dragEnd={this.dragEnd}
                                          drop={this.drop}/&gt;
                                  &lt;/li&gt;
                              ))}
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/Overlay&gt;
          )
      };
  };
  </code></pre>
  
  <p>The compile error that I am getting is the following:</p>
  
  <pre><code> ./src/components/widget-toolbar/WidgetToolbar.tsx
  Module build failed (from ./node_modules/babel-loader/lib/index.js):
  SyntaxError: C:\Users\ojandali\Documents\dev\ozone1\ozone-framework-client\packages\application\src\components\widget-toolbar\WidgetToolbar.tsx: Unexpected token (35:10)
  
    33 | 
    34 | 
  &gt; 35 |     const isOpen = useBehavior(mainStore.isWidgetToolbarOpen);
       |           ^
    36 |     const themeClass = useBehavior(mainStore.themeClass);
    37 | 
    38 |     const userDashboards = useBehavior(dashboardStore.userDashboards);
      at Object.raise (C:\Users\ojandali\Documents\dev\ozone1\ozone-framework-client\packages\application\node_modules\@babel\parser\lib\index.js:3851:17)
      at Object.unexpected (C:\Users\ojandali\Documents\dev\ozone1\ozone-framework-client\packages\application\node_modules\@babel\parser\lib\index.js:5167:16)
  </code></pre>