CODEWITHSUNDEEP
reactjsjsx
Trip
Trip

Reputation: 27114

Best way to dynamically append react Components to the same <div>

I have a jQuery autosuggest feature that allows you to search, select, and add your selection to a <div id="suggested-peers" />, where you can see all your selected choices thus so far.

  select: function(event, ui) {
    var newMember = ReactDOM.render(<MemberThumbnail name={ui.item.value.full_name} title={ui.item.value.title} />, document.getElementById("suggested-peers") );

The problem is that every time I make a new selection, the old one is replaced. I've thought of a number of ways to do this, but I'm curious what the best React-style way of accomplishing this would be.

Upvotes: 0

Views: 1229

Answers (1)

JMM
JMM

Reputation: 26787

There's not much information here, but basically something like:

// Render method of the component that you have ReactDOM.render()ed into
// your document.
function render () {
  return (
    <div>
      {this.state.members.map(member => <MemberThumbnail
        name={member.full_name} title={member.title}
      />)}
    </div>
  );
}

// Where `this` refers to the component referenced above
select: function(event, ui) {
  this.setState({members: this.state.members.concat(ui.item)});
}

Upvotes: 1

Related Questions