JSX: Ignoring Case-Sensitivity Sends Browser Into Endless Loop

This post is a copy of a post on our family blog. It’s so much better housed here….

I am about half-way through Zac Gordon’s book React Explained. I read most of it on the plane back from Europe and didn’t do the exercises. A couple of weeks ago I finally circled back to them.

For the JSX exercise #3 we are asked to create a Header component with a header element and the two earlier used example inside of it.

When I tried to run my code, every browser would choke and the computer freeze. I was quite stumped. I couldn’t figure it out. I gave up and watch Zac’s video and before he got to the spot it already dawn on me that Capitalization is a feature of JSX and React.

When I first wrote my code it wasn’t clear to me the distinction between Header the component and <header/> the element. I had both capitalized and sent the browser into an endless loop fast, with self referencing component calls.

Here is the correct code.

Capital H for the component. Small h for the header element.

function Header() {
        <header id="main">

Then we can call it in the render function


If you are looking for awesome JavaScript courses, check out Zac Gordon’s React and WordPress courses. They are super affordable and quite excellent.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.