React Hooks - Hamburger Menu

Question

I am trying to use React Hooks in order to implement a hamburger menu on my project website but am greeted with a few different errors in the console. The menu is just visible to start and the button has no effect.

Warning: Failed prop type: Invalid prop open of type object supplied to Burger, expected boolean.

Warning: Failed prop type: Invalid prop setOpen of type object supplied to Burger, expected function.

Uncaught TypeError: setOpen is not a function

Please see code below:

Burger.js

import React from 'react';
import { bool, func } from 'prop-types';
import { StyledBurger } from './BurgerStyles';

const Burger = ({ open, setOpen }) => {
  return (
    <StyledBurger open={open} onClick={() => setOpen(!open)}>
      <div />
      <div />
      <div />
    </StyledBurger>
  )
}
Burger.propTypes = {
    open: bool.isRequired,
    setOpen: func.isRequired,
  };

export default Burger;

Menu.js

import React from "react";
import { bool } from 'prop-types';
import { StyledMenu } from "./MenuStyles";

const Menu = ({ open }) => {
    return (
      <StyledMenu open={open}>
          CONTENT
      </StyledMenu>
    )
  }
  Menu.propTypes = {
    open: bool.isRequired,
  }
  export default Menu;

Movement of menu.js is handled in styled component using:

transform: ${({ open }) => open ? 'translateX(0)' : 'translateX(100%)'};

App.js

import React, { useState } from 'react';
import Header from "./components/Header/Header";
import Menu from "./components/Menu/Menu";

const App = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
    <Menu open={open} setOpen={setOpen} />
    <Header open={open} setOpen={setOpen} />
    </>
  )
  }

export default App;

Header.js

import React, {useState} from 'react';
import Burger from '../Burger/Burger';


const Header = (open, setOpen) => (
        <div>
            <Burger open={open} setOpen={setOpen} />
        </div>
)

Any help appreciated, thank you!!

Answer 1

In Header.js, the props are not being destructured, so open is actually the props object.

// It should be this
const Header = ({ open, setOpen }) => (

// Not this
const Header = (open, setOpen) => (