react-animate | React animation mixin | Frontend Framework library

Please apologize my lack of knowledge but I'm new to React and JavaScript.

I'm building a Website where I have a Sidebar and a Navbar on top of the page. The Sidebar is activated / deactivated via an hamburger menu which is located in the Navbar-component. It is activated via CSS-classes:

My Problem now is, that I dont know how to transfer the variables toggleButton and isActive from the Navbar.jsx where they are declared to the Sidebar.jsx where I need them to activate my Sidebar. Do I need to import the js files? Is it possible to export isActive and toggleButton seperatly from the JSX-Code?

Thanks for your help! :)

This is my Code:

Navbar-component

I have an example of a toggle that hide/display content.

I used https://www.npmjs.com/package/react-animated-css and it worked perfectly when displaying the content, meaning that after showing the content the animation is playing.

Now that I press the toggle button, the content instantly vanishes without animation.

I checked in the console and the class for the animationOut is working, but it seems that the content closes before the animation have the time to play, so it's hidden.

How to fix this issue ?

The working code : https://stackblitz.com/edit/react-sorgz5?file=src/App.js

Hi there I'm working on a site and I don't why one of my pages loads very slowly and with lag. Is that because of my on scroll listeners or so many references? Any Problem in my code? Or is it because my host is so slow I don't understand what's the problem.

My website: http://bakhshnameyab.ir/researchPrograms

I've made weather app using weather API , and I got infinite loop error when I had icons code inside ( switch case loop). I want the icon to be updated by the current weather state from API! Can somebody help me on this? how to solve the infinite loop error..?

I'm trying to figure out how to open one item(at my situation image gallery), but not all at once. I'm using FsLightbox dependencies. My code seems working until I'm triggering button to open the image gallery, but it opens all three columns.

index.js

im new in react, and its complicated to explain but. i want to put more than one photo in array.

I have created an data.js file

I am using material-ui/core v.4.10.2 on the normal react-scripts start dev-server everything works perfectly.

But when built and served through Nginx or npm-module serve the rendering is not working correctly...

(I saw similar issues on the material-ui Github, but they were all (falsely) closed

So I have a React.js project that suddenly doesn't load local images (such as: src={require("../../assets/images/logo/logo-v4.png")} on localhost. Remote images from an external URL are displaying. Looks like my live deployed build still loads the images properly, but I am worried to build and deploy my recent changes to corrupt my live build with whatever this issue is. I have tried to git checkout an older commit where I know the images were working properly, but that checkout is also not displaying local images.

I have tried deleting node_modules, package-lock.json, npm cache clean --force, then npm install again, and the problem still persists. I have reset my PC. I have run other React.js projects on my PC and local images load just fine, so it is just with this specific project.

Not sure how this happened, or what to try next to resolve this issue. Has this happened to anyone else? What else can I try to resolve this? Let me know if you want me to share more code. Thanks!

package.json:

I am trying the send axios get request to server.js, which send a GET request to contentful website. I am getting no data in Home.js and getting following error in console. Could someone please help me to identify the issue here ? I could see data displaying in setSearchResults while setting a break point, please refer screenshot attached.

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render. in Home (created by Context.Consumer) in Route (at App.js:18) in Switch (at App.js:17) in Router (created by BrowserRouter) in BrowserRouter (at App.js:15) in App (at src/index.js:11) in Router (created by BrowserRouter) in BrowserRouter (at src/index.js:10)

Home.js