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