I have a code from a login/register page which i found from a tutorial, on the tutorial it works fine but i cant make it work
import React from 'react'
import "./LoginRegister.css"
function LoginRegister() {
function SwitchContent(){
const content = document.getElementById('content');
const registerBtn = document.getElementById('register');
const loginBtn = document.getElementById('login');
registerBtn.addEventListener('click', () =>{
content.classList.add("active")
});
loginBtn.addEventListener('click', () =>{
content.classList.remove("active")
});
}
return (
<div className='content justify-content-center align-items-center d-flex shadow-lg' id='content'>
{/* Register form */}
<div className='col-md-6 d-flex justify-content-center'>
<form>
<div className='header-text mb-4'>
<h1>Create Account</h1>
</div>
<div className='input-group mb-3'>
<input type='text' placeholder='Name' className='form-control form-control-lg bg-light fs-6'></input>
</div>
<div className='input-group mb-3'>
<input type='email' placeholder='Email' className='form-control form-control-lg bg-light fs-6'></input>
</div>
<div className='input-group mb-3'>
<input type='password' placeholder='Password' className='form-control form-control-lg bg-light fs-6'></input>
</div>
<div className='input-group mb-3 justify-content-center'>
<button className='btn border-white text-white w-50 fs-6'>Register</button>
</div>
</form>
</div>
{/* Login form */}
<div className='col-md-6 right-box'>
<form>
<div className='header-text mb-4'>
<h1>Sign int</h1>
</div>
<div className='input-group mb-3'>
<input type='email' placeholder='Email' className='form-control form-control-lg bg-light fs-6'></input>
</div>
<div className='input-group mb-3'>
<input type='password' placeholder='Password' className='form-control form-control-lg bg-light fs-6'></input>
</div>
<div className='input-group mb-5 d-flex justify-content-between'>
<div className='form-check'>
<input type='checkbox' className='form-check-input'/>
<label htmlFor='formcheck' className='form-check-label text-secondary'><small>Remember me</small></label>
</div>
<div className='forgot'>
<small>Forgot password?</small>
</div>
</div>
<div className='input-group mb-3 justify-content-center'>
<button className='btn border-white text-white w-50 fs-6'>Login</button>
</div>
</form>
</div>
{/* switch panel */}
<div className='switch-content'>
<div className='switch'>
<div className='switch-panel switch-left'>
<h1>Hello, Again</h1>
<p>We are happy to see you back</p>
<button className='hidden btn text-white w-50 fs-6' id='login' onClick={SwitchContent}>Login</button>
</div>
<div className='switch-panel switch-right'>
<h1>Welcome</h1>
<p>Join Our Platform</p>
<button className='hidden btn border-white text-white w-50 fs-6' id='register' onClick={SwitchContent}> Register</button>
</div>
</div>
</div>
</div>
)
}
export default LoginRegister;
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "bootstrap/dist/css/bootstrap.min.css"
import "./LoginRegister.css"
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();
import { BrowserRouter, Routes, Route } from "react-router-dom";
import LoginRegister from "./LoginRegister";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<LoginRegister/>}></Route>
</Routes>
</BrowserRouter>
);
}
export default App
i am pretty new to react and i have no idea what is wrong with my code ive tried looking at the documentation provided at the errors but i cant understand whats wrong
ive tried chatgpt but it didnt help me much
the errors
react.development.js:1630
Uncaught TypeError: Cannot read properties of null (reading 'useRef')
at Object.useRef (react.development.js:1630:1)
at BrowserRouter (index.tsx:789:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
react-dom.development.js:18687
The above error occurred in the <BrowserRouter> component:
at BrowserRouter (http://localhost:3000/static/js/bundle.js:71583:5)
at App
react.development.js:209
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
react.development.j
my package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.2.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
and my react versions
> npm ls react
├─┬ @testing-library/[email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]
npm notice
npm notice New patch version of npm available! 10.8.1 -> 10.8.3
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.3
npm notice To update run: npm install -g [email protected]
npm notice
npm list react react-dom react-router-dom
├─┬ @testing-library/[email protected]
│ ├── [email protected] deduped
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]
Uploading your package.json file might be helpful so that we can see what versions you are on but I think there are a couple of different things you can try
- Ensure that your
package.jsonis located in the root of your directory and all packages are installed correctly - Make sure you have compatible versions the packages:
npm list react react-dom react-router-dom - Update node modules’ compatibility by removing the node_modules folder with
rm -rf ./node_modulesand then runnpm ioryarnto install the dependencies all again - Ensure that
react-router-domhas also been installednpm install react-router-dom
2