I have two files: The main file - App.js and a JSX Element which I want to load in App.js. element.js has the following code:
const element = () => {
return (
<div className="text-gray-100 bg-gray-800 h-64 px-4">
<h1>Test Title</h1>
<p>Lorem ipsum</p>
</div>
);
};
export default element;
The App.js file is as follows:
import './App.css';
import element from './element';
function App() {
return (
<div className="flex">
<element />
</div>
);
};
export default App;
When importing, VSC shows that "element is declared but not used", and the html page shows nothing but a white page.
In JSX, lower-case tag names are considered to be HTML tags. However, lower-case tag names with a dot (property accessor) aren't.
See HTML tags vs React Components.
<component /> compiles to React.createElement('component') (html tag)
<Component /> compiles to React.createElement(Component)
<obj.component /> compiles to React.createElement(obj.component)