React Class is throwing a compile error regading function classs using TypeScript

Question

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.

React Component that I am trying to create with the state and functions that will be passed into the WidgetTile objects.

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<SortOrder>("asc");

    const userWidgets = useMemo(() => {
        let _userWidgets = values(userDashboards.widgets).filter((w) => w.widget.isVisible);

        if (sortOrder === "asc") {
            _userWidgets.sort((a, b) => a.widget.title.localeCompare(b.widget.title));
        } else {
            _userWidgets.sort((a, b) => b.widget.title.localeCompare(a.widget.title));
        }
        if (!isBlank(filter)) {
            _userWidgets = _userWidgets.filter((row) => {
                return row.widget.title.toLowerCase().includes(filter.toLocaleLowerCase());
            });
        }
        return _userWidgets;
    }, [userDashboards, sortOrder, filter]);

    dragStart = (e) => {
        // 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) => {
        // the following is activated when the drag is ended
        console.log('ended drag');
        this.setState({
            targetBox:null
        });
        this.destroyPopup();
    }

    drop = (e) => {
        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 = () => {
        console.log("create Popup");
    }

    destroyPopup = () => {
        console.log("destroy popup");
    }

    render(){
        return(
            <Overlay
                isOpen={isOpen}
                hasBackdrop={false}
                canOutsideClickClose={true}
                canEscapeKeyClose={true}
                onClose={mainStore.closeWidgetToolbar}
                className={Classes.OVERLAY_SCROLL_CONTAINER}
            >
                <div className={classNames(styles.toolbar, className, themeClass)} data-element-id="widgets-dialog">
                    <h3 className={styles.toolbarTitle}>Widgets</h3>
                    <div className={styles.toolbarMenu}>
                        <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"
                        />
                        <SortButton order={sortOrder} onClick={setSortOrder} />
                        <Button minimal icon="pin" />
                        <Button minimal icon="cross" onClick={mainStore.closeWidgetToolbar} />
                    </div>
                    <hr />

                    <div className={Classes.DIALOG_BODY}>
                        <div className={styles.buttonBar}>
                            <Button text="Prev" icon="caret-left" small={true} disabled={true} />
                            <span className={styles.currentPage}>Page 1</span>
                            <Button text="Next" icon="caret-right" small={true} disabled={true} />
                        </div>
                        <ul className={styles.widgetList}>
                            {userWidgets.map((userWidget) => (

                                <li key={userWidget.id}>
                                    <UserWidgetTile 
                                        userWidget={userWidget} 
                                        dragStart={this.dragStart}
                                        dragEnd={this.dragEnd}
                                        drop={this.drop}/>
                                </li>
                            ))}
                        </ul>
                    </div>
                </div>
            </Overlay>
        )
    };
};

The compile error that I am getting is the following:

 ./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 | 
> 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)

Answer 1

constructor(props) {
...
}; // <- semicolon here is invalid syntax in class

// v- const is also invalid syntax in class 
const isOpen

Basically you got all wrong with ES6 class syntax. Please look up and get yourself familiar with that syntax.