For loop inside map React.js

Question

Description

So I have an array like this:

const CategoriesList = [
    {nameNL:'bakkerij', 
     nameFR:'boulangerie', 
     nameEN:'bakery', 
     nameDE:'Bäckerei', 
     categories: [
        {nameNL:'bakkerij', nameFR:'boulangerie', nameEN:'bakery', nameDE:'Bäckerei'},
        {nameNL:'bier', nameFR:'la bière', nameEN:'beer', nameDE:'Bier'},
    ]},
]

And I can easily map all my items. However; inside that map function I want to loop between the categories array inside the categorieslist. I have tried to do this but apparently I can't use a for loop inside my map.

Question

How can I loop objects inside a map function.

What I have

 {CategoriesList.map(({nameNL, nameFR, nameEN, nameDE, categories}, index) => {
    return (
        <div key={index} className='flxRow'>
            <div className={['flxCell', 'flxCol2'].join(' ')}>{nameNL}</div>
            <div className={['flxCell', 'flxCol2'].join(' ')}>{nameFR}</div>
            <div className={['flxCell', 'flxCol2'].join(' ')}>{nameEN}</div>
            <div className={['flxCell', 'flxCol2'].join(' ')}>{nameDE}</div>
            {
                for (i = 0; i < categories.length; i++) { 
                    console.log(categories[i].name)
                }
            }
        </div>  
)})}

you use another map.

Sulthan
– Sulthan

2018-12-11 11:47:01 +00:00
Commented Dec 11, 2018 at 11:47 — Sulthan
– Sulthan, Commented Dec 11, 2018 at 11:47

Anil Kumar · Accepted Answer · 2018-12-11 11:49:04Z

5

const CategoriesList = [
{nameNL:'bakkerij', 
 nameFR:'boulangerie', 
 nameEN:'bakery', 
 nameDE:'Bäckerei', 
 categories: [
    {nameNL:'bakkerij', nameFR:'boulangerie', nameEN:'bakery', nameDE:'Bäckerei'},
    {nameNL:'bier', nameFR:'la bière', nameEN:'beer', nameDE:'Bier'},
]},

]

const result = CategoriesList.map(item => {
 return item.categories.map(item2 => {
   return (
    console.log(item2.nameNL));
  })
 });

Working:

https://codepen.io/anildelhi/pen/YdPmvL?editors=1111

answered Dec 11, 2018 at 11:49

Anil Kumar

2,3192 gold badges18 silver badges24 bronze badges

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

Comments

Sagiv b.g · Accepted Answer · 2018-12-11 11:47:18Z

4

You can use another map:

 {CategoriesList.map(({nameNL, nameFR, nameEN, nameDE, categories}, index) => {
    return (
        <div key={index} className='flxRow'>
            <div className={['flxCell', 'flxCol2'].join(' ')}>{nameNL}</div>
            <div className={['flxCell', 'flxCol2'].join(' ')}>{nameFR}</div>
            <div className={['flxCell', 'flxCol2'].join(' ')}>{nameEN}</div>
            <div className={['flxCell', 'flxCol2'].join(' ')}>{nameDE}</div>
            {
                categories.map(category => ...)
            }
        </div>  
)})}

I recommend reading about keys as well

answered Dec 11, 2018 at 11:47

Sagiv b.g

31.1k10 gold badges72 silver badges106 bronze badges

1 Comment

Cédric Bloem Over a year ago

That did it; thank you! & I understand what you mean about the keys part.

Pradeep Bisht · Accepted Answer · 2021-06-26 08:04:45Z

news API has JSON data like:-

{data: [
{
Description: "dummy description.",thumbnail_img_path: "images.jpg",video_path: "Z9xBo001urjkd"
},
{
Description: "dummy desc2.",thumbnail_img_path: "images-thumnail-1.jpg",video_path: "jklbtt2of8"
}]}

{news.map((item,i) => (   
                    
                    <div key={i}>
                    {
                        item.data.map((data, index) => (  //console.log(data.Description)) )                        
                        <div key={index}>
                            <div className="panel video-thumbnail" >
                            <img className="img-fluid"  src={data.thumbnail_img_path} alt="thum1" ytid={data.video_path} />
                            <div className="img-overlay">
                            <a href="#"><img src="../micro-assets/img/video-play.svg" alt="vplay" /></a>
                             </div>
                            </div>  
                        </div>
                        ))
                    }
                </div>                       
                ))                                  
        }

Collectives™ on Stack Overflow

For loop inside map React.js

Description

Question

What I have

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Description

Question

What I have

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related