How do I loop through an array in an array of objects

Question

I know how to run loops inside react but how do I do it inside an object which is already inside an array being looped?

I am trying to display each ingredient item as an <li>, so far I have got it working with recipe but I am lost with ingredient. If anyone could chime in, I'd appreciate it.

var Recipes = React.createClass({
// hook up data model
  getInitialState: function() {
    return {
      recipeList: [
        {recipe: 'Cookies', ingredients: ['Flour ', 'Chocolate']},
        {recipe: 'Cake', ingredients: ['Flour ', 'Sprinkles']},
        {recipe: 'Onion Pie', ingredients: ['Onion ', 'Pie-Crust']}
      ]
    }
  },

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

  render: function() {
    return (
      <div>
        {this.state.recipeList.map((item, index) => (
          <div className="panel panel-default">
            <div className="panel-heading"><h3 className="panel-title">{item.recipe}</h3></div>
            <div className="panel-body">
              <ul className="list-group">
              {this.loop}
              </ul>
            </div>
          </div>
          )
        )}
      </div>
    );
  }
});

just keep nesting your .map calls

Daniel Lizik
– Daniel Lizik

2016-09-27 00:17:42 +00:00
Commented Sep 27, 2016 at 0:17 — Daniel Lizik
– Daniel Lizik, Commented Sep 27, 2016 at 0:17

Phi Nguyen · Accepted Answer · 2016-09-27 03:36:57Z

3

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()

edited Sep 27, 2016 at 3:36

answered Sep 27, 2016 at 0:19

Phi Nguyen

3,0561 gold badge16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Malekaii Over a year ago

I like the logic here and it makes sense, but I get this console error Uncaught SyntaxError: embedded: Unexpected token (23:48) 21 | 22 | loop: function(ingredients) { > 23 | return ingredients.map(ingredient, index) => ( | ^ 24 | <li key={index} className="list-group-item">{ingredient}</li> 25 | ) 26 | },

Phi Nguyen Over a year ago

Sorry ! I forget returning value inside the map method. I fixed it.

Malekaii Over a year ago

Thanks so much, your solution is great! I can't believe it was so simple!

Maciek Jurczyk · Accepted Answer · 2016-09-27 01:23:57Z

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/>
    );
  }
});

Collectives™ on Stack Overflow

How do I loop through an array in an array of objects

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related