Why It Isn't Displaying (React Small App)-CodePudding

I cannot figure out why the text isn't displaying? The header class should be exporting the render function which should have the header in it.

App.js:

    import logo from './logo.svg';
import './App.css';
import header from './Components/header';


function App() {
  return (
    <header />
  );
}

export default App;

header.js:

    import React, { Component } from 'react';

export class header extends Component {
  render() {
    return ( 
    <div> <h1> dfdfd </h1></div>
        );
  }
}

export default header;

CodePudding user response：

try to use Uppercase for the function 'header'

import Header from "./Components/header";

function App() {
  return <Header />;
}

export default App;

note: filename lowercase is okay.

EDIT:

More details example:

App.js

import { header as Header } from "./Components/header";

function App() {
  return <Header />;
}

export default App;

header.js

import React, { Component } from "react";

class header extends Component {
  render() {
    return (
      <div>
        {" "}
        <h1> dfdfd </h1>
      </div>
    );
  }
}

// export default header; // No Problem if you 'import Header from "/path/to/file"'
export { header }; // Must be 'import {header: Header} from "/path/to/file"'

but I suggest to always write your component class / function name start with uppercase.

CodePudding user response：

Header component should start its name with capital case

class Header extends Component {
  render() {
    return ( 
    <div> <h1> dfdfd </h1></div>
        );
  }
}

export default Header;

CodePudding user response：

Make the Class name capital Header and export it using export default Header

App.js

 import logo from './logo.svg';
 import './App.css';
 import Header from './Components/header';


 function App() {
   return (
     <Header />
   );
 }

export default App;

Header.js

import React, { Component } from 'react';

export default class Header extends Component {
   render() {
   return ( 
     <div> <h1> dfdfd </h1></div>
     );
   }
 }

CodePudding user response：

I modified your code to be something like this:

Modified App.js

import logo from './logo.svg';
import './App.css';
import Header from './Components/Header';


function App() {
  return (
    <Header />
  );
}

export default App;

Modified Header.js

import React, { Component } from 'react';

export class Header extends Component {
  render() {
    return ( 
    <div>
      <h1>
        dfdfd
      </h1>
    </div>
   );
  }
}

export default Header;

Notice how I changed your header.js to Header.js with an uppercase H. React does not like it when you name your components starting with a lower case alphabet. Just rename your header.js to Header.js and it should start to work.

Cheers,

Arjis Chakraborty.