react-burger-menu | canvas sidebar component with a collection of effects | Animation library

This is probably super simple but I am looking to swap out a class when I am not on my homepage. For example I have this:

I am new here but a long time reader of StackOverflow content!

I am new to React and have a simple question about Multi-Pages App.

I did start to work on a website for a friend, I started with a one-pager but finally I did realize that I will need more then only one page. I installed react-router-dom and tried to set it up, the website doesn't return any errors, but only the SideBarMenu component is showing up !

the content of Home is not showing on / , same for the rest on /audio, /video, /images... And the weirdest part of it, if I write as URL for example some random thing like /asiomaos9j, it still show a blank website with the SideBarMenu without even crashing...

Anyone know why all my component on Home are not showing? Or even on /images the js file only contains a div with a H1 inside and this H1 not showing either... I can't figure out what I am doing wrong with this !

I did import as follow:

I have worked with create-react-app repo before. But recently I am using create-next-app repo for server side rendering. I created a project with npx create-react-app and install a package for example npm install react-burger-menu --save from github and then use it in App.js. everything is working:

I'm trying to click a button in a React app, and while it works on desktop, it does not work properly on mobile. I need to long-press or double-click, and play a little bit until the button finally works.

I have replicated my problem in this demo.

If you open the page on a desktop browser and attempt to open the hamburger menu, it should open right away. However, if you open it in mobile, it will not work right away. You will also see the menu jitter a little bit off-screen. Attempting to close the menu by clicking on the overlay has the same problem in mobile.

Why is this not working properly on mobile? How can I get the button to work when I tap it?

I added cursor:pointer to the button after seeing this somewhat similar post, but this doesn't help.

This problem has occurred in the past to me, and I was able to solve it using onMouseDown but it doesn't work this time, I'm guessing because I'm using a component that is imported from a package (react-burger-menu) and can't override its onClick function? I'm not sure what is happening.

EDIT: Solved. See my answer.

Any idea how to resolve this error? I get it when trying npm install:

npm ERR! Found: react@16.14.0 npm ERR! node_modules/react npm ERR! react@"^16.14.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^17.0.1" from react-card-flip@1.1.0 npm ERR! node_modules/react-card-flip npm ERR! react-card-flip@"^1.0.11" from the root project

The package.json has: "react-card-flip": "^1.0.11",

I removed the node_modules directory and the package-lock.json file.

I'm not sure where the reference to 1.1.0 is coming from. I DID try to install it earlier when trying to upgrade React 17, but ran into limitations with blueprintjs/core 3.39.0 requiring React 16.14.0.

Thanks for any ideas or help you can provide.

Full content of the package.json below in case that helps.

package.json content:

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:

Using a React app, i am currently addind custom attributes to HTML tags or React components for E2E tests (Testcafe)

I am not sure why the extra data-test="burger-menu-btn" is not showing up in any Element when i inspect the page ?

I have created a working burger menu in my Gatsby application using react-burger-menu. I am trying to get it so that when an AnchorLink in the burger is clicked, the Burger menu closes. I have tried doing

This is my Burger menu code:

Component that fetches data from a server on getConvForNum, but somehow it enters an infinite loop. Even if i keep only render() and this function it keep sending GET requests to server.

OpentTickets.js