is there any way to use lowercase letter for a component in ReactJS?

Question

I was trying to make some component , I'm new in React and I tried with some basics like creating simple component that stored <h1></h1> tag with Hello World in it . I noticed that when I'm turning Myfunc's first letter to lowercase "m" it is rendering nothing but empty page although I'm changing it trough the something.js too , I searched in the web and it seems that there's something like rule here , anyway... is there anyway to use component with lowercase ? I'm forgetting that rule many time

import React from "react";
import Myfunc from "./something.js";
function App(){
    return(
       <div>
         <Myfunc/>
       </div>
    );
}
export default App;

[Have at it.](https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized) — PsyGik, Jul 15 '21 at 16:44
Does this answer your question https://stackoverflow.com/questions/33259112/why-do-components-in-react-need-to-be-capitalized? — misha130, Jul 15 '21 at 16:45
@misha130 yes , but I'm forgetting to capitalize many time , what can I do ? — JSXStarter, Jul 15 '21 at 16:49
@JSXStarter that habit will go with time. It's better to adopt the standards which majority follows. — Avinash Thakur, Jul 15 '21 at 16:59
There is also an exception where if the component has a dot in the name like obj.component then its rendered as a react component — misha130, Jul 15 '21 at 17:29

score 0 · Accepted Answer · answered Jul 15 '21 at 16:45

Here's some part of the docs...maybe from here you can get a better idea.

When an element type starts with a lowercase letter, it refers to a built-in component like or and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.

https://reactjs.org/docs/jsx-in-depth.html

score 0 · Answer 2 · answered Jul 15 '21 at 16:57

You can have React components with lowercase name, but you can't use them in JSX.

If you strictly don't want to capitalize the first letter, or don't want to reassign it to a capitalized variable ( ReactComp = reactComp ), then you can follow this ugly looking approach.

const myFunc = (props) => {
  const { name, children } = props;
  return <div>
    <h1> {name} </h1>
    <h3> a lower case component </h3>
    {children}
  </div>
}

const App = props => {
  return (
    React.createElement(
      myFunc,
      {
        name: 'My Func',
        // other props
      },
      <h6>This is a child component</h6>,
      <h6>This is another child component</h6>
    )
  )
}

ReactDOM.render(<App />, document.querySelector('#root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root" />

actually I want to use capitalize letter but I'm forgetting it many time — JSXStarter, Jul 15 '21 at 16:59
It sure it complex and ugly, but it is something what your JSX code will ultimately be converted to. I'm sure this will keep you away from using lower-case names. — Avinash Thakur, Jul 15 '21 at 17:01

is there any way to use lowercase letter for a component in ReactJS?

2 Answers2