I am at the beginning phase of my react learning. Right now, trying to create an application. Getting the above error. Below is the code
Tile.js
import React from 'react';
import styles from './Tile.module.css';
// Tile.js
const Tile = ({ text, onClick }) => {
return (
<div className={styles.tile} onClick={onClick}>
{text}
</div>
);
};
export default Tile;
Onboarding.js
// Onboarding.js
import React from 'react';
import styles from './Onboarding.module.css';
const Onboarding = () => {
// const questionsLeft = new Array(6).fill(null);
// const questionsRight = new Array(6).fill(null);
return (
<>
</>
);
};
export default Onboarding;
LandingPage.js
// Landing.js
import React from 'react';
import { useNavigate } from 'react-router-dom';
import Tile from '../Tile/Tile.js';
import styles from '../Tile/Tile.module.css';
import TileTextArray from '../Constants/constants.js';
const Landing = () => {
const navigate = useNavigate();
// const handleTileClick = () => {
// navigate('/onboarding');
// };
return (
<div className={styles.tileContainer}>
<Tile text={TileTextArray.Tile1Text} onClick={() => navigate('/onboarding')} />
<Tile text={TileTextArray.Tile2Text} />
<Tile text={TileTextArray.Tile3Text} />
<Tile text={TileTextArray.Tile4Text} />
</div>
);
};
export default Landing;
App.js
// App.js
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Landing from './Landing/LandingPage';
import Onboarding from './Onboarding/Onboarding';
import './App.css';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Landing />} />
<Route path="/onboarding" element={<Onboarding />} />
</Routes>
</Router>
);
}
export default App;
I don’t have any duplicate react version, and After executing npm ls react I got the below
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
└── [email protected]
I couldn’t figure out why this is failing. Requesting help!
