Ad

Trying To Render A List. Nothing Showing On Screen

- 1 answer

Using Meteor and React. Trying to render a list of data from the server onto the client. the server's data looks like this:
Searches.insert({text: data.items[i].snippet.title});

if(Meteor.isClient) {
   Searches = new Meteor.Collection('searches');
   Meteor.subscribe('allSearches');
}

....

    renderTasks(){
   return this.data.searches.map((searches) => {
      return <SearchResultItem searches={searches} />;
    });
 },

....

 <ul>
    {this.renderTasks()}
 </ul>

....

SearchResultItem = React.createClass({
  render(){
    return
      <li>
         {this.props.searches.text}
      </li>
      }
});
Ad

Answer

You need to provide an unique key-prop to your dynamic child elements

Dynamic Children

The situation gets more complicated when the children are shuffled around (as in search results) or if new components are added onto the front of the list (as in streams). In these cases where the identity and state of each child must be maintained across render passes, you can uniquely identify each child by assigning it a key:

 render: function() {
    var results = this.props.results;
    return (
      <ol>
        {results.map(function(result) {
          return <li key={result.id}>{result.text}</li>;
        })}
      </ol>
    );
  }

(REF: https://facebook.github.io/react/docs/multiple-components.html#dynamic-children)

In your case:

 renderTasks(){
   return this.data.searches.map((searches, i) => {
      return <SearchResultItem key={i} searches={searches} />;
    });
 }
Ad
source: stackoverflow.com
Ad