[Solved]-How do I loop through an array in an array of objects-Reactjs

You seem to be missing a return statement in the loop method.

You can cascade rendering as deep as you'd wish, only remember that you need to call the method instead of just placing it in the component structure (see this.loop without call parentheses in your sample):

var myComponent = React.createClass({
  renderListElements: function (parent) {
    return this.state.listElements[parent].map((element, index) => (
      <li 
        className="my-component__sub-component__list-element" 
        key={`${parent.uid}_${element.uid}`}
      >
        {element.name}
      </li>
    ));
  },

  render: function () {
    var parentsId = [ 0, 1, 2, 3 ];

    return (
      <div className="my-component">
        {parentsId.map((item, index) => (
          <div 
            className="my-component__sub-component" 
            key={item.uid}
          >
            {this.renderListElements(item)}
          </div>
        )}
      <div/>
    );
  }
});

How about this way :

  loop: function(ingredients) {
   return ingredients.map((ingredient, index) => {
    return (<li key={index} className="list-group-item">{ingredient}</li>)
   })
  },

  render(){
      ...
        {this.loop(item.ingredients)}
      ...
  }

One more thing, you shouldn't use index of array as key because it will be difficult to manage when editting the array later. It will be better if you assign key with something very unique like id or index + Date.now()