Warning: <VIEW /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements

Question

console.error node_modules/react-dom/cjs/react-dom.development.js:506 Warning: is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

I have the issue with Jest and react-pdf

Answer 1

In React(Native/JS) world you must name your component in PascalCase, PascalCase is a naming convention in which the first letter of each word in a compound word is capitalized. Software developers often use PascalCase when writing source code to name functions, classes, and other objects. PascalCase is similar to camelCase, except the first letter in PascalCase is always capitalized.

So you must name your components like these:

function MyFnComp(props) {
.
.
.
}

class MyClsComp extentds React.Component {
.
.
.
}

export function App(){
  return (
    <MyFnComp />
    <MyClsComp />
    {/*Using lowercase for HTML elements:*/}
    <div> This is a HTML native element! </div>
  )
}