React - Parsing error: Unexpected token, expected ";"

Question

I'm trying to call a method inside resize() when the screen width is less than or equal to 900, but I get the error Parsing error: Unexpected token, expected ";" how to fix this problem? https://ibb.co/cX0QxS1 https://ibb.co/bQSj1hq

import React, { Fragment } from 'react';
import less from "./css/lesson.module.css";
import "./css/activeLink.css";
import "./css/betaLesson.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Navbar } from "../../../Navbar/Navbar";
import ReactHtmlParser from 'react-html-parser';
import * as Icon from 'react-bootstrap-icons';
import styled from "styled-components";
import { slide as Menu } from 'react-burger-menu'

import { NavbarMobile } from '../../../Navbar/Mobile_Navbar/NavbarMobile';

const NextPage = styled.button`
    display: flex;
    align-items: center;
    font-family: 'Roboto';
    font-weight: 500;
    letter-spacing: 0.2px;
    color: #ff7b77d9;
    padding: 9px 22px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    border: 1px solid #ff7b77d9;
    border-radius: 2px;
`;

export class Lessons extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            indexDescription: 1,
            listActiveIndex: 1,
            sidebarMobile: true,
            menuMobileIsOpen: false,
        }
    }

    componentDidMount() {
        window.addEventListener("resize", this.resize.bind(this));
        this.resize();
    }

    resize() {
        if (window.innerWidth > 900) {
            this.setState({ sidebarMobile: true })
            this.setState({ menuMobileIsOpen: false })
        } else {
            this.setState({ sidebarMobile: false })
        }
    }

    hideMenu() {
        this.setState({ sidebarMobile: false })
    }

    componentWillUnmount() {
        window.removeEventListener("resize", this.resize.bind(this));
    }

    changeDescription(index) {
        this.setState({ indexDescription: index, listActiveIndex: index })
    }

    nextPage() {
        // next page
        this.setState({ indexDescription: this.state.indexDescription + 1, listActiveIndex: this.state.indexDescription + 1 })
    }

    prevPage() {
        // next page
        this.setState({ indexDescription: this.state.indexDescription - 1, listActiveIndex: this.state.indexDescription - 1 })
    }

    showsidebarMobile = () => {
        this.setState({ sidebarMobile: !this.state.sidebarMobile })
    }

    menuMobileIsOpen = () => {
        this.setState({ menuMobileIsOpen: !this.state.menuMobileIsOpen })
    }

    HideMenuMobileIsOpen = () => {
        this.setState({menuMobileIsOpen: false})
    }

    showSettings(event) {
        event.preventDefault();
    }

    render() {

        const listLessons = this.props.lesson.map((item, index) => {

            // active link
            const className = this.state.listActiveIndex === index ? 'list_active' : null;

            return (
                <Fragment key={index}>
                    {item.title && (
                        <li className={less.courseTitle}>
                            <div>
                                <p>{item.title}</p>
                            </div>
                        </li>
                    )}

                    {item.titleName && (
                        <li className={className} onClick={this.changeDescription.bind(this, index)}>
                            <div className={less.sidebar_list}>
                                <div style={{ display: "flex" }}>
                                    <FontAwesomeIcon className={less.item_icon} icon={item.iconName} />
                                </div>
                                <div className={less.titleName}>
                                    <div>
                                        <p>{item.titleName}</p>
                                    </div>
                                </div>
                            </div>
                        </li>
                    )}
                </Fragment>
            );
        });

        return (
            <>
                <div className="abc">
                    <div>
                        <Navbar color="blue" bg="tomato" centerFlexNavbarContainer="flex" LiItem="NavBarli" MainStream="MainStream"
                            navbarSearchPage="Search" navbarHomePage="Home" NavbarMobileIconsBlock="mobile"
                            centerHeadlineNavbarColumn="center" showsidebarMobile={this.showsidebarMobile} menuMobileIsOpen={this.menuMobileIsOpen} />

                        <div>
                            {
                                this.state.menuMobileIsOpen ? <NavbarMobile /> : null
                            }
                        </div>
                    </div>

                    <div className={less.wrapper}>
                        <Menu isOpen={this.state.sidebarMobile} >
                            <main id="page-wrap">
                                <div className={less.sidebar}>
                                    <div>
                                        <ul onClick={this.hideMenu.bind(this)}>
                                            {listLessons}
                                        </ul>
                                    </div>
                                </div>
                            </main>
                        </Menu>

                        <div>
                            <div className={less.main_content}>
                                <div className={less.main_inside_content}>
                                    <div className={less.header}>
                                        <div className={less.header_next_page}>
                                            <div>
                                                <h2>{this.props.lesson[this.state.indexDescription]["heading"]}</h2>
                                            </div>
                                        </div>
                                    </div>
                                    <div className={less.info} onClick={this.HideMenuMobileIsOpen.bind(this)}>
                                        <div className={less.description}>
                                            {
                                                ReactHtmlParser(this.props.lesson[this.state.indexDescription]["data"]["description"])
                                            }
                                            <div className={less.btn_Next_Prev_Container}>
                                                <div>
                                                    {
                                                        this.state.indexDescription >= 2 ?
                                                            <NextPage onClick={this.prevPage.bind(this)} > <Icon.ArrowLeft className={less.arrowLeft} /> Back </NextPage>
                                                            :
                                                            null
                                                    }
                                                </div>
                                                <div>
                                                    <NextPage onClick={this.nextPage.bind(this)} > Next <Icon.ArrowRight className={less.arrowRight} /> </NextPage>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </>
        );
    }
}

Jay Kariesch · Accepted Answer · 2020-12-17 19:05:22Z

1

hideMenu is invalid syntax. You're kind of declaring a function in the style of a class method inside of a class method, and also trying to setState inside of the method without actually calling it.

    if (window.innerWidth < 900) {
        hideMenu() {
            this.setState({ sidebarMobile: false })
        }
    }

You'd need to either...

a) Forgo attempting to call a function and simply set state:

    if (window.innerWidth < 900) {
       this.setState({ sidebarMobile: false })
    }

b) Declare your function as a class method and call it within your condition, like this:


hideMenu() {
  this.setState({ sidebarMobile: false })
}

resize() {
    if (window.innerWidth > 900) {
        this.setState({ sidebarMobile: true })
        this.setState({ menuMobileIsOpen: false })
    } else {
        this.setState({ sidebarMobile: false })
    }

    if (window.innerWidth < 900) {
        this.hideMenu()
    }
}

If you're trying to create hideMenu inside of your class method, you would do this:

resize() {
    const hideMenu = () => this.setState({ sidebarMobile: false })
    
    if (window.innerWidth > 900) {
        this.setState({ sidebarMobile: true })
        this.setState({ menuMobileIsOpen: false })
    } else {
        this.setState({ sidebarMobile: false })
    }

    if (window.innerWidth < 900) {
        hideMenu()
    }
}

edited Dec 17, 2020 at 19:05

answered Dec 17, 2020 at 17:56

Jay Kariesch

1,4929 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Synchro Over a year ago

I wanted to use the last example, but I get an error that Cannot read property 'bind' of undefined

Jay Kariesch Over a year ago

Ohh, yeah, you'll have to either bind hideMenu to this, or use an arrow function. I'd use an array function for simplicity's sake. Arrow functions will bind to the parent scope automatically. I'll update the example.

Synchro Over a year ago

Unfortunately, it gives the same error, I think it is related to the scope you mentioned ibb.co/gtG78SM

Jay Kariesch Over a year ago

If you're using hideMenu in your markup, it has to be declared as a class method, otherwise you'll run into scope issues. So out of my examples, use example b.

Synchro Over a year ago

I tried using the example b) but in this case the method works ignoring the check if (window.innerWidth <900) {this.hideMenu ()} that is, it works even when the screen is above 900 pixels

|

Collectives™ on Stack Overflow

React - Parsing error: Unexpected token, expected ";"

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related