Why does not <div style={{ backgroundColor: "black" }}></div> render black but <div style={{ backgroundColor: "black" }}> Hello </div> doesn't?

by

I am trying to learn React.JS and something kind of blew my mind.

I have this Header component :

class Header extends Component {
  render() {
    return <div style={{ backgroundColor: "black" }} />;
  }
}

that I am calling in my App.js :

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

When the code stays like this, nothing shows on my web page. But if I change my Header component to this :

class Header extends Component {
      render() {
        return <div style={{ backgroundColor: "black" }}> Hi</div>;
      }
    }

I get a black line on the top of my web page.

I don’t understand why writing something into my div makes me get the blackline, and I was wondering how can I get the black background without writing anything in my ?

72 thoughts on “Why does not <div style={{ backgroundColor: "black" }}></div> render black but <div style={{ backgroundColor: "black" }}> Hello </div> doesn't?”

Leave a Comment