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 ?
There are a couple of reasons for this:
div
is not a self-closing tag, i.e. you can’t use it like<div />
and instead it must be used as<div></div>
div
has no height so there is nothing to add background colour to.To fix this you must
height: "32px"
color: "white", backgroundColor: "black"
Your header doesn’t have a height so in the case that it has no text it is a height of 0px so you don’t see the background color, if you add text to the header it stretches to accommodate the text so it gets a height automatically and that is why you see the back background.
If you want to have an empty header with a black background try editing your code as mentioned by @Kayden van Rijn like this
style={{ backgroundColor: "black", height: "32px" }}
tadalafil 10 mg – http://xtadalafilp.com/ generic tadalafil