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() {
       return(
        <header id="main">
          {h1LinkEl}
          {pEl}
        </header>
       );
     }

Then we can call it in the render function

 ReactDOM.render(
     <Header/>,
      document.getElementById('root')
    );

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