JSX: Ignoring Case-Sensitivity Sends Browser Into Endless Loop

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 weeks ago I finally circled back to the exercises.

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')
    );