How to fix the error type void is not assignable to type ((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) |undefined using react?

Question

i want to set the state isOpen to true or false on clicking div element and the code is like below,

function Parent() {
    const [isOpen, setIsOpen] = React.useState(false);
    return (
        <Wrapper>
            <div onClick={setIsOpen(!isOpen)}>
                something
            </div>
        </Wrapper>
    );
}

But this gives me error "type void is not assignable to type ((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) |undefined "

how can i fix this. could someone help me fix this. thanks.

Answer 1

Change onClick execution. Try The following example:

function Parent() {
    const [isOpen, setIsOpen] = React.useState(false);
    return (
        <Wrapper>
            <div onClick={()=> setIsOpen(!isOpen)}>
                something
            </div>
        </Wrapper>
    );
}