React typerror, is not a function

Question

I am getting this error TypeError: handleToggleSidebar is not a function in Dashboard.js

Inside src/components/SideBar.js

export const SideBar = ({collapsed}) => { 
    return(
         <ProSidebar collapsed={collapsed}>
         ... rest of the code
    )
};

Inside src/pages/Dashboard.js

export const SideBar = ({handleCollapsedChange}) => { 
    return(
         <GiHamburgerMenu className="Hamburger_icon" onClick={() => handleCollapsedChange(true)} />
         ... rest of the code
    )
};

Inside src/App.js

 function App() {
 const [collapsed, setCollapsed] = useState(false);
 const handleCollapsedChange = (checked) => {
     setCollapsed(checked);
 };
 return (
     <div className="App">
     <Router>
     <SideBar
      collapsed={collapsed}
      handleCollapsedChange={handleCollapsedChange}
     />
     ... rest of the code
 )
};

Answer 1

You asked for a different prop to be expected than what was passed down from your App.js.

export const SideBar = ({handleCollapsedChange}) => { 
    return(
         <GiHamburgerMenu className="Hamburger_icon" onClick={() => handleCollapsedChange(true)} />
         ... rest of the code
    )
};

Change your App.js to this, I changed your useState(), it should work now.

import React, { useState } from "react";
import { SideBar } from "./components/SideBar/SideBar";
import { Dashboard } from "./pages/Dashboard";
import Container from "react-bootstrap/Container";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect
} from "react-router-dom";

function App() {
  const [collapsed, setCollapsed] = useState(false);

  const handleCollapsedChange = () => {
    setCollapsed(!collapsed);
  };

  return (
    <div className="App">
      <Router>
        <SideBar
          collapsed={collapsed}
          handleCollapsedChange={handleCollapsedChange}
        />
        <Container>
          <Switch>
            {/* <Route exact path="/" component={() => <Dashboard handleCollapsedChange={handleCollapsedChange} />} /> */}
            <Route 
              path='/'
              render={(props) => (
                <Dashboard {...props} handleCollapsedChange={handleCollapsedChange} />
              )}
/>
            <Redirect to="/404" />
          </Switch>
        </Container>
      </Router>
    </div>
  );
}

export default App;

I showed two implementations of the <Route /> component but use the latter one (You can delete the commented one).

References:

https://ui.dev/react-router-v4-pass-props-to-components/