Problem importing stateless function is react - reactjs

Question

I am very new to react and having a bizarre problem. I have defined a stateless function and when i want to try to import it in my main component it is not loading the function. i am guessing there is a naming convention that i dont know of. npm start does not give any error so I am assuming the code is compiling ok.
My stateless component is below
import React from 'react';
const AppHeader = () => {
return(
<div class="jumbotron text-center">
<h1>Map Search</h1>
<p>Searching map for nearest matches from account</p>
</div>
);
}
export default AppHeader;
below does not work,
import React from 'react';
import './App.css';
import appHeader from './UI/appHeader';
class App extends React.Component {
render(){
return (
<div className="App">
<appHeader/>
</div>
);
}
}
export default App;
VS code lint says
appHeader is declared but its value is never used.
However below does work,
import React from 'react';
import './App.css';
import KKK from './UI/appHeader';
class App extends React.Component {
render(){
return (
<div className="App">
<KKK/>
</div>
);
}
}
export default App;
VS code lint does not show the error anymore also the app is working as expected. As you can see i only changed the name of the appHeader component to KKK. can someone point out what am i doing wrong and may be provide any documentation around this.

Answer 1

You need to capitalize appHeader to be AppHeader in order for React to understand that this is a custom component and not a built in html component. Components that start with lowercase are assumed to be built in HTML elements.
Check out this answer: ReactJS component names must begin with capital letters?
And from the React docs:
User-Defined Components Must Be Capitalized
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.
We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.