Naming User-Defined Components in React

Another error that taught an important rule Reactjs requires. I have imported a react native drawer component beginning with a lower case letter and rendered the component but react-native throwed the following error.

Invariant Violation: View config not found for name menuDrawer

The problem was with “menuDrawer”, which should be “MenuDrawer” for react to render this user-defined component.

In short, the first letter of a JSX tag determines how that element will be compiled by React.

If first letter is capitalized, element type is considered as a user-defined react component.

/*WRONG - React considers "menuDrawer" as an HTML tag*/
render() {
    return <menuDrawer />;
  }
  
  /*RIGHT - React considers "MenuDrawer" as a user-defined component*/
render() {
    return <menuDrawer />;
  }

If it is a lower-case tag, then it refers to common built-in HTML elements like <div>, <span>, <img>..

Behind the scenes, react library turn a tag declaration into “React.createElement” function call.

//React expect this component to be a built-in element like 'div',  'span'.

<menuDrawer /> //-->React.createElement ("menuDrawer")

//React expect this element to be custom component

<MenuDrawer /> //-->React.createElement ("MenuDrawer") 

//React expect this element to be custom component
<menuDrawer.menu /> //-->React.createElement ("menuDrawer.menu") 

As you see in the above example, 3rd line is also considered as a custom component, although it begins with a lower-case letter. Here comes another react rule to keep in mind; a lower case tagged component with a dot notation is accepted as a react component.