title: Setting HTML inside React from AJAX response
body: <p>I am trying to get some data and set a page to be the result</p>
  
  <pre><code>function getData() {
      $.ajax({
          url:"http://localhost:8080/",
          type:'GET',
          dataType: 'html',
          success: function(data){
              console.log(data);
              $('.App').html(data);
          }
      });
  }
  
  class App extends Component {
    render() {
      getData()
      return (
        &lt;div className="App"&gt;This worked&lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>This is the response being printed out:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"&gt;&lt;meta name="theme-color" content="#000000"&gt;&lt;link rel="manifest" href="/manifest.json"&gt;&lt;link rel="shortcut icon" href="/favicon.ico"&gt;&lt;title&gt;React App&lt;/title&gt;&lt;link href="/static/css/main.c17080f1.css" rel="stylesheet"&gt;&lt;/head&gt;&lt;body&gt;&lt;div id="root"&gt;&lt;div class="App" data-reactroot=""&gt;&lt;header class="App-header"&gt;&lt;img src="logo.svg" class="App-logo" alt="logo"/&gt;&lt;h1 class="App-title"&gt;Welcome to React&lt;/h1&gt;&lt;/header&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;script type="text/javascript" src="/static/js/main.d1b4ad06.js"&gt;&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>When the page loads, it flashes the correct HTML for a second, then I get this error:</p>
  
  <pre><code>VM11047:1 Uncaught SyntaxError: Unexpected token &lt;
  </code></pre>
  
  <p>What am I doing wrong? </p>