onClick doesn't fire event React.js

Question

I'm trying to toggle element by clicking on button, however it doesn't do anything. Also note that code is simplified as I didn't want to copy whole app, I just included parts I thought are important. Here is code:

Navbar.js ..Here I try to invoke the function it comes from context.js file where I setup my contextAPI

import { useGlobalContext } from "./context";    
const { openSidebar, openSubmenu, closeSubmenu } = useGlobalContext();
    <button className="btn toggle-btn" onClick={openSidebar}>

context.js

const AppContext = React.createContext();

const AppProvider = ({ children }) => {
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
const openSidebar = () => {
     console.log("test")
     setIsSidebarOpen(true);
 };
return (
     <AppContext.Provider value={(isSidebarOpen,  openSidebar, closeSidebar)}>
         {children}
     </AppContext.Provider>
 );
}

export const useGlobalContext = () => {
return useContext(AppContext);
};

export { AppContext, AppProvider };

App.js

document.addEventListener("click", (e) => {
 console.log(e);
 console.log(e.target);
});

index.js

import App from "./App";
import { AppProvider } from "./context";



ReactDOM.render(
   <React.StrictMode>
    <AppProvider>
     <App />
    </AppProvider>
   </React.StrictMode>,
   document.getElementById("root")
);

The event listener from App.js displays correctly event and also event.target which is the button. However I don't get any log to console from context.js where it should log "test", not error, not warning, nothing... onClick is completely ignored.

Dhiraj Baruah · Accepted Answer · 2020-12-05 20:05:01Z

1

You will find your answer here

onClick={( )=>{openSidebar( )}}

answered Dec 5, 2020 at 20:05

Dhiraj Baruah

1823 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

MadGrip Over a year ago

well it did run the function indeed, but now I get openSidebar is not a function error ...

Dhiraj Baruah Over a year ago

Try this onClick={( )=>{openSidebar}}

MadGrip Over a year ago

Expected an assignment or function call and instead saw an expression

MadGrip Over a year ago

I think there must be a problem somewhere in context API where I send my functions as props, I don't know what else could be wrong

MadGrip · Accepted Answer · 2020-12-06 12:54:31Z

0

Okay Ive resolved it, the problem was in parentheses in context.js

here is old code:

return (
 <AppContext.Provider value={(isSidebarOpen,  openSidebar, closeSidebar)}>
     {children}
 </AppContext.Provider>

);

here is new one:

return (
    <AppContext.Provider value={{ isSidebarOpen,  openSidebar, closeSidebar }}>
        {children}
    </AppContext.Provider>
);

I needed to replace () with {}

answered Dec 6, 2020 at 12:54

MadGrip

4716 silver badges21 bronze badges

Collectives™ on Stack Overflow

onClick doesn't fire event React.js

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related