title: Looping Through Items in an Object in ReactJs
body: <p>I have a Redux store that has a few objects in it, and I would like to display all of those objects on my webpage using a DOM. But, it's not going through and I can't figure out why not.</p>
  
  <p>Right now I have it set up where I have an empty array called <code>rows</code>. Then, I use a forEach loop and add a piece of DOM to the array. Then, I return <code>{rows}</code>. But, for some reason, nothing gets displayed. </p>
  
  <p>My reducer:</p>
  
  <pre><code>var pushMessageReducer = function (state, action) {
      switch (action.type) {
          case 'RECEIVED_PUSH_MESSAGE':
  
              var push = JSON.parse(action.PushMessage);
  
              return _.forEach(push, function (value) {
                  console.log(value);
                  Object.assign({}, state, value);
              });
      }
  };
  </code></pre>
  
  <p>My component:</p>
  
  <pre><code>var App = React.createClass({
      render: function () {
          console.log("State: " + store.getState());
          var rows = [];
           _.forEach(this.props.pushMessages, function (value, key, push) {
  
              _.forEach(push, function(notification) {
  
                  //do some logic where, using notification, I set vendorId, problem...
  
                  rows += (
                      &lt;div className="row" key={vendorId}&gt;
                          &lt;Card problem={problem}&gt;
                              &lt;ProgressBar threePercent={threePercent} complete={iOSComplete}&lt;/ProgressBar&gt;
                          &lt;/Card&gt;
                      &lt;/div&gt;);
              })
  
          });
          return (
              &lt;div id="troi-app"&gt;
                  {rows}
              &lt;/div&gt;
          )
      }
  });
  </code></pre>
  
  <p>It just returns an empty webpage. Any and all help would be greatly appreciated. Thanks.</p>