CODEWITHSUNDEEP
javascriptreactjs
Max Baldwin
Max Baldwin

Reputation: 3472

React: Insert One Component After Another

Very simply I have an HTML structure like this:

<div id="App" class="ui container">
    <div id="Keywords" class="left"></div>
    <div id="Users" class="right"></div>
    <div class="clear"></div>
    <div id="Nav"></div>
</div>

And I am appending my components like this:

ReactDom.render(<Feed listenTo="keywords" />, document.querySelector('#Keywords'));
ReactDom.render(<Feed listenTo="users" />, document.querySelector('#Users'));
ReactDom.render(<Nav />, document.querySelector('#Nav'));

I want to get rid of the #Keywords and #Users divs. I just want my components to append to the #App div. I tried something like this:

ReactDom.render(<Feed listenTo="keywords" />, document.querySelector('#App'));
ReactDom.render(<Feed listenTo="users" />, document.querySelector('#App'));
ReactDom.render(<Nav />, document.querySelector('#Nav'));

And I ended up getting this error:

Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.

Anyone have an idea of how I can just append those two components into the #App div? Do I have to make #App a parent component?

Thanks in advance!

Upvotes: 0

Views: 1505

Answers (1)

Michael
Michael

Reputation: 1028

You could do something like this:

let Main = React.createClass({
  render: function() {
    return <div className="container main">
      <Feed listenTo="users" />
      <Feed listenTo="keywords" />    
      <Nav />
    </div>;
  }
});

React.render(
  <Main />,
  document.getElementById('app')
);

I have included this fiddle.

It uses the depricated React.render instead of ReactDOM.render - but it seems to work.

Upvotes: 1

Related Questions