导入无状态功能的问题是反应

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.