I create a react app and make a test component and I try to render it and it didn't render

this is the component: https://i.stack.imgur.com/vsNH1.png

and this is the main App.js file: https://i.stack.imgur.com/P8lY7.png

and this is my result: https://i.stack.imgur.com/mQrFd.png

why is my test component not rendering?

CodePudding user response：

React components must begin with a capital letter. Non-capitalized names are considered by JSX to be just regular HTML tags (like div), so your output markup will be just <test />.

Quoth the JSX documentation:

The first part of a JSX tag determines the type of the React element.

Capitalized types indicate that the JSX tag is referring to a React component. These tags get compiled into a direct reference to the named variable, so if you use the JSX expression, Foo must be in scope.

Your test component must be named Test.