React JSX append HTML (react object) after initialization

Question

How do I make this function work, appending to my react object between initialization and return

render () {
    var users = this.state.users,
        appContainer = <div id="container"></div>

    for (var i = 0; i < users.length; i++) {
        // this doesn't work
        appContainer.appendChild(this.createCard(users[i]));
    }

    return appContainer;
}

Answer 1

Sorry for misreading the question. What you're looking to do can be achieved with the "portals" pattern described by Ryan Florence & Michael Jackson here. Below is an attempt at solving what I believe is your question. Forgive me if I'm still not understanding your question.

render() {
  // dont render anything, open a "portal"
  return <div ref="container" />;
}

componentDidMount() {
  // get initialized component markup
  var container = this.refs.container;
  var cards = [];

  for (var i = 0; i < users.length; i++) {
    cards.push(this.createCard(users[i]));
  }

  // start a new React render tree with the container and the cards
  // passed in from above, this is the other side of the portal.
  ReactDOM.render(<div>{cards}</div>, container):
}

Answer 2

do something like this

render () {
var users = this.state.users,
var usersDiv = [];
for (var i = 0; i < users.length; i++) {
    var temp = (<div>{users[i]}</div>);
    usersDiv.push(temp);
}
return(
  <div>
     {usersDiv}
  </div>)
}

this would return you a div with multiple users div based on your JSON.