title: Problem importing stateless function is react
body: <p>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. </p>
  
  <p>My stateless component is below</p>
  
  <pre><code>import React from 'react';
  
  const AppHeader = () =&gt; {
      return(
  
              &lt;div class="jumbotron text-center"&gt;
              &lt;h1&gt;Map Search&lt;/h1&gt;
              &lt;p&gt;Searching map for nearest matches from account&lt;/p&gt; 
              &lt;/div&gt;
  
      );
  }
  
  export default AppHeader;
  </code></pre>
  
  <p>below does not work,</p>
  
  <pre><code>import React from 'react';
  import './App.css';
  import appHeader from './UI/appHeader';
  
  class App extends React.Component {
    render(){
  
      return (      
        &lt;div className="App"&gt;
          &lt;appHeader/&gt;
        &lt;/div&gt;
      );
    }
  
  
  }
  
  export default App;
  </code></pre>
  
  <p>VS code lint says </p>
  
  <blockquote>
    <p>appHeader is declared but its value is never used. </p>
  </blockquote>
  
  <p>However below does work,</p>
  
  <pre><code>import React from 'react';
  import './App.css';
  import KKK from './UI/appHeader';
  
  class App extends React.Component {
    render(){
  
      return (      
        &lt;div className="App"&gt;
          &lt;KKK/&gt;
        &lt;/div&gt;
      );
    }
  
  
  }
  
  export default App;
  </code></pre>
  
  <p>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.</p>