REACT - rendering a list when iterating over an object

gistfile1.txt

// Rendering when iterating over an object



// proxy/helper function
function mapObject(object, callback) {
  return Object.keys(object).map(function (key) {
    return callback(key, object[key]);
  });
}

inline usage:
{mapObject(yourObject, function (key, value) {
  return <div>Key: {key}, Value: {value}</div>;
})}

or via variable 

renderRules(ruleItems) {
    
    let rules = "";

    if (ruleItems) {
      rules = Object.keys(ruleItems).map(function (key) {
        return (
            <li className="could-come-from-object-when-used-as-config" key={key}>{ruleItems[key]}</li>
        )
      });
    }
    
    return rules;
  }
  
  <ul className="">{rules}</ul>