React Function Component unused variable error-CodePudding

While trying to put the component below into a router I get the following error:

WARNING in src\App.js Line 3:8: 'errorScreen' is defined but never used no-unused-vars


const errorScreen = () => {
    const homeRedirect = () => {
        window.location.assign('/')
    }

    return (
        <div className='successMessage'>
            <h2> Error! </h2>
            <h3>
                Please try again on a computer or laptop.{' '}
                <a href='/' onClick={homeRedirect}>
                    Back to Portfolio
                </a>
            </h3>
        </div>
    )
}

export default errorScreen

My code in App.js

import HomeScreen from './screens/HomeScreen'
import FormScreen from './screens/FormScreen'
import errorScreen from './screens/errorScreen'
import { Route } from 'react-router'
import { BrowserRouter as Router, Routes } from 'react-router-dom'

function App() {
    return (
        <Router>
            <Routes>
                <Route path='/' element={<HomeScreen />} />
                <Route path='/error' element={<errorScreen />} />
                <Route path='/form' element={<FormScreen />} />
            </Routes>
        </Router>
    )
}

export default App

The other components work just fine

CodePudding user response：

Problem is with your naming of component, component name must start with capital letter. All React component names must start with a capital letter. If you start a component name with a lowercase letter, it will be treated like a built-in element like a <div> or a <span>, meaning in your case <errorScreen /> is not referencing errorScreen from import, as you were thinking, but rather treating it as some buil-in element tag. Just rename component name from errorScreen to ErrorScreen and update route with new name.