Why It Isn't Displaying (React Small App)

January 22, 2022

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;

>Solution :

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.