'useState hook giving "not a function" error

Hello I was following a tutorial to create a webapp with React. But at some point while using useState meant to change a burger menu icon into a cross onClick (and vice versa) my use of the setClick variable keeps getting a "not a function" error and I am not too sure why...

Any help would be appreciated :)

import React,{ useState } from 'react';
import { Link } from 'react-router-dom';

function Navbar() {
    const {click, setClick} = useState(false);

    const handleClick = () => setClick(!click);

    return (
        <>
            <nav className="navbar">
                <div className="navbar-container">
                    <Link to="/" className="navbar-logo">
                        SMLT <i class="fas fa-dice-d20"></i>
                    </Link>
                    <div className='menu-icon' onClick={handleClick}> 
                        <i className={click ? 'fas fa-times' : 'fas fa-bars'} />
                    </div>
                </div>
            </nav>
        </>
    );
}

enter image description here



Solution 1:[1]

const {click, setClick} = useState(false);

should be: const [click, setClick] = useState(false);

for further reference, see the React Hooks Docs here: https://reactjs.org/docs/hooks-state.html

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1