I'm trying to iterate through a list/array/object of things: (I used coffeescript to keep it clear, jsfiddle of full JS here. but it's just a forEach)

pages = for page, each of @props.ids
    $('#start').append("<div id='"+page+"' ></div>")
    React.renderComponent page(title: each.title, text: each.text), $("#"+page)[0]

and append each of them, instead of replacing, leaving only the last item in the list.

Where the #start element is the starting container, and I want to populate it with multiple elements, but I need to give each their own container, otherwise they will all overwrite eachother, the default reactjs behaviour.

I'm wondering if there's a way to tell react to append instead of replacing the div.

I'd like to avoid using jquery if possible, and do it purely react-ly.

I though about giving the React.renderComponent page the initial list, and then iterate in the previously called template, however, then i'm facing a different problem, I have to return a reactjs element object, consisting of the whole list, which I really don't prefer.

I need for the initial call to create individual, independent react templates, appending eachother in a list, prefferably without any extra containers, or using jquery.

I'm trying to iterate through a list/array/object of things: (I used coffeescript to keep it clear, jsfiddle of full JS here. but it's just a forEach)

pages = for page, each of @props.ids
    $('#start').append("<div id='"+page+"' ></div>")
    React.renderComponent page(title: each.title, text: each.text), $("#"+page)[0]

and append each of them, instead of replacing, leaving only the last item in the list.

Where the #start element is the starting container, and I want to populate it with multiple elements, but I need to give each their own container, otherwise they will all overwrite eachother, the default reactjs behaviour.

I'm wondering if there's a way to tell react to append instead of replacing the div.

I'd like to avoid using jquery if possible, and do it purely react-ly.

I though about giving the React.renderComponent page the initial list, and then iterate in the previously called template, however, then i'm facing a different problem, I have to return a reactjs element object, consisting of the whole list, which I really don't prefer.

I need for the initial call to create individual, independent react templates, appending eachother in a list, prefferably without any extra containers, or using jquery.

• javascript
• coffeescript
• reactjs

2 Answers 2

I think you're getting the concept wrong. React's renderComponent indeed renders a single component, somewhere. Doing this multiple times only re-renders the same component at that place (aka idempotent). There's no real "append" statement, at least not in the way you asked for.

Here's an example of what you're trying to achieve. Forgot about renderComponent in this. It's just to put the component somewhere.

/** @jsx React.DOM */
var pages = [{title: 'a', text: 'hello'}, {title: 'b', text: 'world'}];

var App = React.createClass({
  render: function() {
    return (
      <div>
        {
          this.props.pages.map(function(page) {
            return <div>Title: {page.title}. Text: {page.text}</div>;
          })
        }
      </div>
    );
  }
});

React.renderComponent(<App pages={pages} />, whateverDOMNodeYouWantItToBeOn);

See what I did there? If I want multiple divs, I just create as many as I want to see. They represent the final look of your app, so making a same div be "appended" multiple times doesn't really make sense here.

Create a div with a class extradiv:

<div class="extradiv">
  
</div>

In CSS, Set It's display to none:

.extradiv {
  display: none;
}
.extradiv * {
  display: none;
}

In JS implement this function:

function GoodRender(thing, place) {
    let extradiv = document.getElementsByClassName('extradiv')[0];
    ReactDOM.render(thing, extradiv);
  extradiv = document.getElementsByClassName('extradiv')[0];
  place.innerHTML += extradiv.innerHTML;
}

Than you can use this in place of ReactDOM.render:

GoodRender(<Component>My Text</Component>, YourDOMObject)