For anyone coming here in 2020 and using Hooks, maybe you are using react-router, and as result, instead of the Nav.Link that are the default component for the Navbar you use Link from react-router. And what did you find? That in result the mobile menu is not working as expected and not closing after clicking … Read more
After globally uninstalling create-react-app, I was still getting an error that my create-react-app was out of date. Here’s what solved that for me: After sudo npm uninstall -g create-react-app Run npx clear-npx-cache Then try reinstalling create-react-app in the proper working directory: npx create-react-app my-app
Anything that is going to change goes in State. If you’re looking at loading an existing entity and editing it, you want controlled inputs, and you want to set the values accordingly. I tend to stay away from defaultValue in most cases (outside of dropdowns) This ties back in to your previous question. If you … Read more
You can use middleware chaining for this purpose. Here’s how you can achieve this: Create a folder called middlewares in your src folder. Create a file called stackHandler.ts in the middlewares folder and paste this content into it: import { NextMiddleware, NextResponse } from “next/server”; export function stackMiddlewares(functions: MiddlewareFactory[] = [], index = 0): NextMiddleware … Read more
The useRouter from next/router is to be used in the pages folder, the initial way of setting up routes in Next.js. Since v13, they introduced a new directory called app (used when you say Yes to the last question shown in the below image), built on top of Server Components, where you define routes differently … Read more
Adding images in the public folder and the src folder both are acceptable methods, however, importing images into your component has the benefit that your assets will be handled by the build system, and will receive hashes which improves caching/performance. You’ll also have the added benefit that it will throw an error if the file … Read more
Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity: Example: const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => <li key={number.toString()}> {number} </li> ); TL;DR Use unique and constant keys … Read more
React uses its own events system with SyntheticEvents (prevents browser incompatabilities and gives react more control of events). Using TestUtils correctly creates such a event which will trigger your onChange listener. The dispatchEvent function on the other hand will create a “native” browser event. But the event handler you have is managed by react and … Read more
Your click handling function would have a format as such: clickHandler: function (event, value) { event.stopPropagation(); // In that case, event.ctrlKey does the trick. if (event.ctrlKey) { console.debug(“Ctrl+click has just happened!”); } }
Think of your useEffect as a mix of componentDidMount, componentDidUpdate, and componentWillUnmount, as stated in the React documentation. To behave like componentDidMount, you would need to set your useEffect like this: useEffect(() => console.log(‘mounted’), []); The first argument is a callback that will be fired based on the second argument, which is an array of … Read more