'react-scripts' is not recognized as an internal or external command
To solve the error: 'react-scripts' is not recognized as an internal or external command”, make sure the react-scripts npm package was installed in the project.
'Switch' is not exported from 'react-router-dom'
The React error 'Switch' is not exported from 'react-router-dom' occurs when we import 'Switch' from react-router-dom v6. In v6, ‘Switch’ was replaced by ‘Routes’
Adjacent JSX elements must be wrapped in an enclosing tag
The "Adjacent JSX elements must be wrapped in an enclosing tag" error can be solved by wrapping the multiple elements in a parent div or in a react fragment
Build password strength checker in React
Learn how to build password strength checker/indicator/meter in React to check uppercase, lowercase letters, numbers, special characters, and password length.
Call multiple functions onClick in React
To call multiple functions onClick in React, pass an event handler function into the onClick prop of the element that can call as many other functions as necessary.
Can't Perform a React State Update on an Unmounted Component
Check why the warning “Can't perform a react state update on an unmounted component” occurred and how to solve it using a flag in useEffect hook.
Cannot read property of undefined in JavaScript
The TypeError: Cannot read property of undefined occurs when we try to read a property on an undefined variable or when we try to access a property on a DOM element that doesn't exist.
To create a 404 page in React using React Router, Create a wildcard path with an asterisk(‘*’) and add it to the very last path of our routes.
Create a Back button with React Router
To create a back button with React Router use useNavigate() hook. Call navigate function eg. navigate(-1); inside the onClick function of the back button.
Each child in a list should have a unique "key" prop
To solve Warning: Each child in a list should have a unique ”key" prop in React, set the id property as a unique key, or set auto-assigning unique keys.
To solve: "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)" make sure named and default imports are correct.
ERESOLVE unable to resolve dependency tree error when installing npm packages
To solve ERESOLVE unable to resolve dependency tree error when installing npm packages, ignore the peerDependencies by --legacy-peer-deps flag, downgrade the npm version.