React - toggle visibility of an element not working

Question

I am trying to toggle the visibility of an menu in a React app. I have tried by setting the state property that I change on click. And then I am checking the objects state to toggle visibility. This is the code:

constructor(props) {
    super(props);

    this.state = {
        'menuOpen': false,
    }
}

openMenu() {
    var newState = !this.state.menuOpen;
    this.setState({
        'menuOpen': newState
    });
}

var menuList = React.createClass({
    render: function() {
        return (
          <div className={styles.menuList}>
            <ul>
              <li>Link</li>
              <li>Link</li>
              <li>Link</li>
            </ul>
          </div>
        );
    }
});

render() {
    return (
        <div className={styles.menu}><span className={styles.menuIcon} onClick={this.openMenu.bind(this)} />
            {this.state.menuOpen ? <menuList /> : null}
        </div>
    );
}

I get an error:

> in ./src/components/post/index.js Module build failed: SyntaxError:
> Unexpected token (31:8)
> 
>      }   
>     var menuList = React.createClass({
>             ^

What am I doing wrong?

Why is your menuList component defined within a variable in your other component's class? I'm pretty sure only methods are allowed inside ES6 class declarations, not arbitrary var declarations. Try moving your menuList component into its own class declaration. — sbking
– sbking, Commented Jun 18, 2017 at 13:40

Mayank Shukla · Accepted Answer · 2017-06-18 14:36:37Z

Changes:

1. Don't define a class inside another class, if you want a separate class then define outside within same file. We can create multiple classes in same file.

2. Use either es6 or es5 way of creating a react component, you are using es6 way for outer and es5 for inner.

3. Since name starts with small letters are treated as HTML elements, so its a rule that all React components must start with a upper case letter, so instead of menuList use MenuList.

4. var menuList = ..... is not a valid syntax, check more details about class MDN Doc.

Write the code like this:

constructor(props) {
    super(props);

    this.state = {
        'menuOpen': false,
    }
}

openMenu() {
    var newState = !this.state.menuOpen;
    this.setState({
        'menuOpen': newState
    });
}

render() {
    return (
        <div className={styles.menu}><span className={styles.menuIcon} onClick={this.openMenu.bind(this)} />
            {this.state.menuOpen ? <MenuList /> : null}
        </div>
    )
}

class MenuList extends React.Component{
    render() {
        return (
            <div className={styles.menuList}>
                <ul>
                    <li>Link</li>
                    <li>Link</li>
                    <li>Link</li>
                </ul>
            </div>
        );
    }
}

Collectives™ on Stack Overflow

React - toggle visibility of an element not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related