Setting HTML inside React from AJAX response

Question

I am trying to get some data and set a page to be the result

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 (
      <div className="App">This worked</div>
    );
  }
}

export default App;

This is the response being printed out:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico"><title>React App</title><link href="/static/css/main.c17080f1.css" rel="stylesheet"></head><body><div id="root"><div class="App" data-reactroot=""><header class="App-header"><img src="logo.svg" class="App-logo" alt="logo"/><h1 class="App-title">Welcome to React</h1></header><div></div></div></div><script type="text/javascript" src="/static/js/main.d1b4ad06.js"></script></body></html>

When the page loads, it flashes the correct HTML for a second, then I get this error:

VM11047:1 Uncaught SyntaxError: Unexpected token <

What am I doing wrong?

there's nothing wrong with using jquery with react as long as you stay away from it's dom manipulation methods such as .html() (which makes up most of the library). You should instead be updating data that causes the react component to render said data once available. — user400654
– user400654, Commented Nov 27, 2017 at 22:06

Eric Hasselbring · Accepted Answer · 2017-11-27 22:16:53Z

1

You could use react's dangerouslySetInnerHTML prop, more info here https://reactjs.org/docs/dom-elements.html

or the safer way to handle is to return a json response and create components to display that returned data

there is also an interesting article on why not to mix jquery dom manipulation and react. http://tech.oyster.com/using-react-and-jquery-together/

edited Nov 27, 2017 at 22:16

answered Nov 27, 2017 at 22:02

Eric Hasselbring

1,4141 gold badge11 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Setting HTML inside React from AJAX response

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related