How to update state in React

Question

I've been trying for a while to get this to work and any method I've come across doesn't seem to work. I've tried W3 Schools and this Stack Overflow question and any others seem to follow the same format. I can't seem to see whats wrong with my code. If anyone can find the issue that would really help:

import React from 'react';

export class Hamburger extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            click: false
        };
    }

    handleClick = () => {
        if (this.state.click) {
            this.setState({click: false});
        } else {
            this.setState({click: true});
        };
    }
    render() {
        let className = 'hamburger';
        if (this.state.click) {
            className += ' cross';
        }

        return (
            <div
                className={className}
                onclick={this.handleClick}
            >
                <svg
                    viewbox='0 0 100 100'
                    preserveAspectRatio='xMidYMid meet'
                >
                    <line x1='10' x2='90' y1='20' y2='20' id='top'/>
                    <line x1='10' x2='90' y1='50' y2='50' id='mid'/>
                    <line x1='10' x2='90' y1='80' y2='80' id='btm'/>
                </svg>
            </div>
        );
    }
}

Thanks in advance

Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Community, Sep 28 '21 at 08:52

score 1 · Answer 1 · answered Sep 21 '21 at 10:38

1

your onclick should be onClick

answered Sep 21 '21 at 10:38

Mehdi Hassan Akash

56
3

score 1 · Answer 2 · answered Sep 21 '21 at 10:40

1

Event handlers should be in camel cases. I can see you have defined as onclick instead of onClick.

Change to <div className={className} onClick={this.handleClick} >

answered Sep 21 '21 at 10:40

Senthilkumar Alagar

9
2

score 1 · Accepted Answer · answered Sep 21 '21 at 10:53

1

Change your onclick to onClick event handlers always in camelCase

answered Sep 21 '21 at 10:53

Anil Loutombam

355
6
19

score 0 · Answer 4 · answered Sep 21 '21 at 11:35

try this one:

 import React from 'react';

export class Hamburger extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            click: false
        };
    }

    handleClick = () => {
        this.setState({click: !click});
    }
    render() {
        let className = 'hamburger';
        if (this.state.click) {
            className += ' cross';
        }

        return (
            <div
                className={className}
                onclick={this.handleClick}
            >
                <svg
                    viewbox='0 0 100 100'
                    preserveAspectRatio='xMidYMid meet'
                >
                    <line x1='10' x2='90' y1='20' y2='20' id='top'/>
                    <line x1='10' x2='90' y1='50' y2='50' id='mid'/>
                    <line x1='10' x2='90' y1='80' y2='80' id='btm'/>
                </svg>
            </div>
        );
    }
}

That looks like a really good option but unfortunately it needs to change other things at the same time so I need the flip-flop style if statement — Amias Burrows, Sep 21 '21 at 15:06

How to update state in React

4 Answers4