Displaying nested react components

Question

I wanted to display following json data in nested react components .For example a list title with sub list I have tried using for loops but for some reason the component doesn't displays

Choose Your topping 1

Regurlar

Stuffed

Choose Your topping 2

Garllic

chilli

Structure of Json Data

let MenuContents = [{
           Title:'Choose one',
           List:{
             Option1:'Regular Base',
             Option2:'Stuffed Crust',
             Option3: 'Thick Base',
             Option4: 'Thin Base'
           }
        },
        {
           Title:'Choose one',
           List:{
             Option1:'Garlic Dip',
             Option2:'Chilli Dip',
             Option3: 'BBq Dip',
             Option4: 'Mayo'
           }
        },
        {
           Title:'Choose one',
           List:{
             Option1:'Tomato Base',
             Option2:'BBq Base',
             Option3: 'Garlic',
             Option4: 'Mayo'
           }
       }]



 
    MenuContents.map((x) => {
    return (
      <div>
        <div className="AddoneTitle">
          <li>
            <h3>{x.Title}</h3>
          </li>
        </div>
        <div className='Choose'>
         {
          Object
          .keys(x.List)
          .forEach(function(key) {
           return( <li>x.List[key]</li>)
          })
         }
      </div>
    </div>
    )
   });

use map instead of forEach

demkovych
– demkovych

2020-07-14 15:28:59 +00:00
Commented Jul 14, 2020 at 15:28 — demkovych
– demkovych, Commented Jul 14, 2020 at 15:28

prabhu · Accepted Answer · 2020-07-14 16:07:22Z

2

This should work, forEach doesn't return an array of list items as map does, also you were missing {} inside li

          MenuContents.map((x) => {
          return (
            <div>
              <div className="AddoneTitle">
                <li>
                  <h3>{x.Title}</h3>
                </li>
              </div>
              <div className='Choose'>
               {
                Object
                .keys(x.List)
                .map(function(key) {
                 return( <li>{x.List[key]}</li>)
                })
               }
            </div>
          </div>);
         })

edited Jul 14, 2020 at 16:07

answered Jul 14, 2020 at 15:59

prabhu

9789 silver badges17 bronze badges

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

Comments

Nafeo Alam · Accepted Answer · 2020-07-14 16:13:16Z

1

Use

{
    x.List.map(record => {
        return (
            <li key={Object.keys(record)}>
                {Object.values(record)}
            </li>
        )
    })
}

instead of:

 {
  Object.keys(x.List).forEach(function(key) {


   return( <li>x.List[key]</li>)
  
  })
  
 }

answered Jul 14, 2020 at 16:13

Nafeo Alam

4,7273 gold badges16 silver badges22 bronze badges

Collectives™ on Stack Overflow

Displaying nested react components

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related