Add data to a react component

Question

I'm building my first react component and am trying to add items to the parent component via an external click event. The user basically chooses from a list of search results and I want these to go into the react component. The problem is, it seems to create a new component every time?

var MatchApp = React.createClass({
  render: function() {
    return (
      <div id="tasks">Here</div>
    );
   }
});

var MatchList = React.createClass({
  render: function() {
    return (
      <a id={this.props.match}>Matching element</a>
    );
  }
});

document.getElementById("hits-container").addEventListener("click", function(e) {
  if( e.target.classList.contains('matching_link') ) {
    //get matching ID reference
    var $match = e.target.id.replace( /^\D+/g, '');

    //now send to react
    ReactDOM.render(<MatchList match={$match}/>, document.getElementById('tasks'));
  }
});

ReactDOM.render(<MatchApp/>, document.getElementById('example'));

What I am trying to achieve.

//search results loaded dynamically.

<div id="hits-container">
<div class="hit">
<!-- User clicks link below to send to matching container ( MatchApp ) -->
    <a href="#" id="6574" class="matching_link"></a>
</div>

//matching container where I want to build an element containing the "hits" from the search results that the user has clicked on above.

<div id="example">
<div id="tasks">

<!-- Loaded from the above hit hopefully into the react component -->
<a href="http://somewhere.com" id="match_6574">Matching element</a>

</div> 
</div>

Answer 1

If you are trying to add items to you list, you have to keep track of them somewhere. A basic example might look like this ( codepen )

Take note of how the MatchApp takes a list, and map s that list into a <ul> . The jQuery handler simply pushes each match into an array, and gives the array to the app so it can update the list.

var MatchApp = React.createClass({
  render: function() {
    var matches = this.props.matches.map(function(match) {
      return <li><MatchList match={match} key={match} /><li>
    })
    return (
      <div id="tasks">
        <ul>
          {matches}
        </ul>
      </div>
    );
   }
});

var MatchList = React.createClass({
  render: function() {
    return (
      <a id={this.props.match}>{this.props.match}</a>
    );
  }
});

var matches = [];
document.getElementById("hits-container").addEventListener("click", function(e) {
  if( e.target.classList.contains('matching_link') ) {
    //get matching ID reference
    var $match = e.target.id.replace( /^\D+/g, '');
    matches.push($match);
    //now send to react
    React.render(<MatchApp matches={matches} />, document.getElementById('example'));
  }
});

React.render(<MatchApp matches={matches} />, document.getElementById('example'));