In React, the type of a component is determined by the way you name your tags. A React component can be of one of the following types:
- A DOM element;
- A React component (i.e. class or function);
- A React fragment.
React has built-in convention on how to name your components:
- Capitalized — component names with first letter uppercase are treated as a React component (e.g.
- Dot Notation — component names with a dot in the name, regardless of the case, are too treated as a React component (e.g.
<Foo.Bar />, etc.);
- Lowercase — component names starting with lowercase letters are treated as DOM elements (e.g.
React would interpret your component differently based on the way you name it. Therefore, your custom React components must either start with a capital letter or use the dot notation.
If, for some reason, you have a React component that does starts with a lowercase letter, then you should assign it to a capitalized variable before using it in JSX.
Hope you found this post useful. It was published . Please show your love and support by sharing this post.