CODEWITHSUNDEEP
reactjs
Alexandria.Omega.Reid
Alexandria.Omega.Reid

Reputation: 41

Map an object within an object - Reactjs

enter image description here

Hi! I'm trying to render a dynamic settings items. 

const settingsItemData = [
    {
        settingsCategory: 'Exam',
        settingsCategoryItems: [
            {
                image: LabExamRequestIcon,
                link: '/settings/exam-request',
                label: 'Exam Items',
                col: '4',
                // offset: 4
            },
            {
                image: LabExamRequestIcon,
                link: '/settings/lab-exam-request',
                label: 'Exam Request',
                col: '4',
            }
        ]
    },
    {
        settingsCategory: 'Others',
        settingsCategoryItems: [
            {
                image: LabExamRequestIcon,
                link: '../settings/panel-exam',
                label: 'Panel Exam',
                col: '4'
            },
            {
                image: UserMaintenanceIcon,
                link: '/settings/user-maintenance',
                label: 'User Maintenance',
                col: '4'
            }
        ]
    }
]

What I want to do is display the title which is Exam on the left side. And display to the right side everything inside the settingsCategoryItems. I've mapped out the settingsCategory. But for the settingsCategoryItems, I can't seem to get render anything.

I've tried this:

const Items = settingsItemData.map((item) => (
            <SettingsCard 

                image={item.settingsCategoryItems.image} 
                link={item.settingsCategoryItems.link} 
                label={item.settingsCategoryItems.label} 

            />
        ))

But none of it renders. How do you usually do this in reactjs? Thank you.

Upvotes: 0

Views: 59

Answers (3)

Alberto Perez
Alberto Perez

Reputation: 2922

you're in the right track, but you also need to map the settingsCategoryItems array in order to access the values and paint the UI that you want to show (As you can see in the following code snippet): 

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';

class Component1 extends Component {
  state = {};

  render() {
    const settingsItemData = [
    {
      settingsCategory: 'Exam',
      settingsCategoryItems: [
          {
            image: 'LabExamRequestIcon',
            link: '/settings/exam-request',
            label: 'Exam Items',
            col: '4',
            // offset: 4
          },
          {
            image: 'LabExamRequestIcon',
            link: '/settings/lab-exam-request',
            label: 'Exam Request',
            col: '4',
          }
      ]
    },
    {
        settingsCategory: 'Others',
        settingsCategoryItems: [
            {
                image: 'LabExamRequestIcon',
                link: '../settings/panel-exam',
                label: 'Panel Exam',
                col: '4'
            },
            {
                image: 'UserMaintenanceIcon',
                link: '/settings/user-maintenance',
                label: 'User Maintenance',
                col: '4'
            }
        ]
    }
];

    const rowItems = settingsItemData.map((item) => {
      return <div className={`row__${item.settingsCategory}`}>
        <h1>{item.settingsCategory}</h1>

        {item.settingsCategoryItems.map(item2 => {
          return <button>{item2.label}</button>;
        })}
      </div>;
    });

    return (
      <div className="container">
        <h1>Settings</h1>

        {rowItems}
      </div>
    );
  }
}

This way you could render all the data that you want (Then you could refactor this in order to use the SettingsCard component).

Upvotes: 0

MikNiller
MikNiller

Reputation: 1280

item.item.settingsCategoryItems is an array, not an object, so as a minimum you need to iterate the settingsCategoryItems as well.

And your arrow functions looks a bit weird, it should be 

(item) => { ... }

and not 

(item) => (....)

This 

const Items = settingsItemData.map((item) => {
            <SettingsCard 

                image={item.settingsCategoryItems.image} 
                link={item.settingsCategoryItems.link} 
                label={item.settingsCategoryItems.label} 

            />
        })

could/should become some thing like

const Items = settingsItemData.map((outerItem) => {
           outerItem.map((item) => {
                  <SettingsCard 
                      image={item.image} 
                      link={item.link} 
                      label={item.label} 
                  />
           })
})

I can't test it, but hope you get the general idea..

Upvotes: 0

Jacki
Jacki

Reputation: 672

Try this. you gotta also perform second map via settingsCategoryItems to make it work

const Items = settingsItemData.map((item) => (
item.settingsCategoryItems.map(el => (
            <SettingsCard 

                image={el.image} 
                link={el.link} 
                label={el.label} 

            />

)) ))

Upvotes: 1

Related Questions