Browser doesn't recognize JSX using React
<p>I'm currently building a mini-search engine as I'm learning JavaScript and the basics of React. I built the functional engine using prompt() and then a for loop to find matches and then return different results based upon the attributes of certain states.</p>

<p>index.html:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Venos&lt;/title&gt;
  &lt;script src="https://unpkg.com/react@15/dist/react.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/react-dom@15/dist/react-dom.js"&gt;&lt;/script&gt;
  &lt;script src="index.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div id="app"&gt;
  &lt;div id="react-app"&gt;

  &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>index.js:</p>

<pre><code>var searchInput = prompt('Search: ');

var states = {
  'North Dakota': {capital: {name: 'Bismarck', namedAfter: 'Ferdinand Bismarck'}, region: 'Mid-west'},
  Minnesota: {capital: 'Saint paul', region: 'Mid-west'},
  Montana: {capital: 'Helena', region: 'Mid-west'},
  Wisconsin: {capital: 'Madison', region: 'Mid-west'}
};

var searchCapitals = function(givenWord){
  for (var key in states) {
    if (givenWord.toLowerCase() === key.toLowerCase()) {
      var found = true
      var foundKey = key
      break;
    }
  }
  if (found == true){
    if (states[foundKey].capital.name){
      var foundSearchComplex = (
        &lt;div&gt;
        // html built from {'Search found: ' + foundKey + ' (capital: ' + states[foundKey].capital.name + ' (named after ' + states[foundKey].capital.namedAfter + '), region: ' + states[foundKey].region + ')'}
          &lt;h4&gt;Search Found&lt;/h4&gt;
          &lt;ul&gt;
            &lt;li&gt;Capital: {states[foundKey].capital.name}&lt;/li&gt;
            &lt;li&gt;Capital named after: {states[foundKey].capital.namedAfter}&lt;/li&gt;
            &lt;li&gt;Region: {states[foundKey].region}&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      )
      ReactDOM.render(foundSearchComplex, document.getElementById('react-app'));
    } else
      var foundSearchSimple = (
        // html built from {'Search found: ' + foundKey + ' (capital: ' + states[foundKey].capital.name + , region: ' + states[foundKey].region + ')'}
        &lt;div&gt;
          &lt;h4&gt;Search Found&lt;/h4&gt;
          &lt;ul&gt;
            &lt;li&gt;Capital: {states[foundKey].capital.name}&lt;/li&gt;
            &lt;li&gt;Region: {states[foundKey].region}&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      };
      ReactDOM.render(foundSearchSimple, document.getElementById('react-app'));
  } else {
    console.log('No results found.')
  }
)

searchCapitals(searchInput);
</code></pre>

<p>Errors found: </p>

<pre><code>index.js:21 Uncaught SyntaxError: Unexpected token &lt;
</code></pre>

<p>I understand that I'm clearly writing something wrong. I just don't understand what :(</p>