React not rendering data coming from reflux store

Question

I am facing trouble with my code not rendering after it gets passed on data from a store.

I am able to console.log() the data coming from the store but the data is not displaying in the DOM.

Here is what my component looks like

var ItemList = React.createClass({
  mixins: [Reflux.connect(SearchStore,"data")],

  getItems() {
    var items;
    var self = this;

    if(typeof self.state.data !== 'undefined' && self.state.data !== '404') {
      items = self.state.data;              
      for(var key in items) {
        if (items.hasOwnProperty(key)) {
          items[key].map(function(obj, key){
            return(
              <h1>Test Test</h1>
            );
          })
        }
      }
    } else {
      return(<div></div>);
    }
  },

  render() {
    var self = this;
    return (
      <div id="search-results">
        {self.getItems()}
      </div>
    );
  }
});

export default ItemList;

The data comes in after it is passed, from the store and i can read the data and am able to render the empty div but the div with the text is not getting rendered at all. My intention is to take the data passed and pass them as props to another component.

Any help on getting this solved would be really great because I have been stuck at this for the last couple of hours.

Answer 1

The issue is getItems does not return an array of rendered items. So I would change it to something like this:

var ItemList = React.createClass({

  mixins: [Reflux.connect(SearchStore,"data")],

  renderItems() {
    var output = [];

    if (typeof this.state.data !== 'undefined' && this.state.data !== '404') {
      for (var key in this.state.data) {
        if (this.state.data.hasOwnProperty(key)) {
          // should use each or forEach instead of map as we don't do anything
          // with returned array but ignoring that issue
          this.state.data[key].map(function(obj, key){
            output.push(<h1>Test Test</h1>);
          });
        }
      }

      return output;
    } else {
      return <div/>;
    }
  },

  render() {
    return (
      <div id="search-results">
      {
        this.renderItems()
      }
      </div>
    );
  }

});


export default ItemList;