React App -App.js is not recognising a page

Question

I have defined cartPage function properly and got picked up in auto snippets within VS code but then this function is not recognized anymore anywhere.

I changed the name of the function from cartPage to CartPage then it worked.

Code attached :

import React from 'react'
import DefaultLayout from '../components/DefaultLayout'
import { useSelector } from 'react-redux'
import { Table } from 'antd'

function cartPage() {
  const { cartItems } = useSelector((state) => state.rootReducer)

  const columns = [
    { title: 'Name', dataIndex: 'name' },
    {
      title: 'Image',
      dataIndex: 'image',
      render: (image, record) => {
        <img src={image} alt='' height='60' width='60' />
      },
    },

    { title: 'Price', dataIndex: 'price' },
  ]

  return (
    <div>
      <DefaultLayout>
        <h3>Cart Summary</h3>
        <Table columns={columns} dataSource={cartItems} />
      </DefaultLayout>
    </div>
  )
}

    export default cartPage


import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Homepage from './pages/Homepage'
import Items from './pages/Items'
import cartPage from './pages/cartPage'

function App() {
  return (
    <div className='App'>
      <BrowserRouter>
        <Routes>
          <Route path='/home' element={<Homepage />} />
          <Route path='/items' element={<Items />} />
          <Route path='/cart' element={<cartPage />} />
        </Routes>
      </BrowserRouter>
    </div>
  )
}

export default App

*"I changed name of the function from cartPage() to CartPage the it worked"* - Sounds like you've found the solution then. React components should be capitalized anyway. — David, Apr 25 '23 at 13:58
Does this answer your question? [ReactJS component names must begin with capital letters?](https://stackoverflow.com/questions/30373343/reactjs-component-names-must-begin-with-capital-letters) — David, Apr 25 '23 at 13:58
That's expected. Note: Always start component names with a capital letter. (from react docs - https://legacy.reactjs.org/docs/components-and-props.html) — AdityaParab, Apr 25 '23 at 14:01
From latest docs - Pitfall React components are regular JavaScript functions, but their names must start with a capital letter or they won’t work! (https://react.dev/learn/your-first-component) — AdityaParab, Apr 25 '23 at 14:02
no i was following someone and they used small 'c' but their worked! — arshaikh0171, Apr 25 '23 at 16:14

React App -App.js is not recognising a page

0 Answers0