how to map inside a map in React

Question

I have this "data" object that already map and I need to mapping the cmsmenuschild and put it at "children:[]" because it has data array of object too and I want to change the cmsmenuschild payload id and name to be key and title , like I just done to id and name before. I really new at React so I,m still figuring out how to do the map inside a map like this.any help would be appreciate

 constructor(props) {
        super(props);          
    this.state = {
                listMenu: []
        };
    }

       data = [
                    {
                        "id": 1,
                        "name": "Manage User",
                        "cmsmenuschild": [
                                        {"id": 14,"name": "Create User"},
                                        {"id": 15,"name": "Update User"},
                        ]
                    },
                         {
                        "id": 2,
                        "name": "Manage BTP",
                        "cmsmenuschild": [
                            {"id": 18,"name": "Create BTP"},
                            {"id": 19,"name": "Update BTP"},

                        ]
                    },
                ]


          const privilegesData = this.data.map((privilege) => {
                  return {
                      key: privilege.id,
                      title: privilege.name,
                      children:[{
                                key: privilege2.id,
                                title: privilege2.name,
}],
                  };
                });




    this.setState({
                      listMenu: privilegesData,
                    });

expected to display new this.state.listMenu woudl be like this

 this.state.listMenu : [
                        {
                            "key": 1,
                            "title": "Manage User",
                            "children": [
                                       {"key": 14,"title": "Create User"},
                                      {"key": 15,"title": "Update User"},
                            ]
                        },
                             {
                            "key": 2,
                            "key": "Manage BTP",
                            "children": [
                                {"key": 18,"title": "Create BTP"},
                                {"key": 19,"title": "Update BTP"},

                            ]
                        },
                    ]

In fact you don't even need to map over cmsmenuschild. Just use privilege.cmsmenuschild to have its array data in the children key. — Weder Ribas
– Weder Ribas, Commented Jul 2, 2018 at 18:22
I'm sorry I just edited My question , that's what I really mean to do because if I just use privilege.cmsmenuschild it keep using the id and name payload and my goal is to change the payload to key and title as well@Oblosys — Satria stuart
– Satria stuart, Commented Jul 2, 2018 at 18:30

Weder Ribas · Accepted Answer · 2018-07-02 18:37:17Z

3

You could just map over the cmsmenuschild object array, like this:

data.map((privilege) => {
    return {
        key: privilege.id,
        title: privilege.name,
        children: privilege.cmsmenuschild.map(child => {
            return {keys: child.id, title: child.name}
        }),
    }
})

answered Jul 2, 2018 at 18:37

Weder Ribas

3596 silver badges16 bronze badges

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

1 Comment

Satria stuart Over a year ago

yap that's it ,that what I've been looking for. Thanks it work now

deowk · Accepted Answer · 2018-07-02 18:56:02Z

3

You don't need to map again:

 const privilegesData = this.data.map((privilege) => {
     return {
         key: privilege.id,
         title: privilege.name,
         children: privilege.cmsmenuchild, // or [...privilege.cmsmenuchild] if your worried about mutability
     };
 });

EDIT: If you need to handle a recursive data structure with an arbitrary amount of children

const keyAndTitle = (obj) => ({ key: o.id, title: o.name });

const normalizeObj = (data) => data.map(d => {
   const obj = keyAndTitle(data);
   if (d.hasOwnProperty('cmsmenuchild')) {
    obj.children = normalizeObj(d.cmsmenuchild);
   }
   return obj;
});

edited Jul 2, 2018 at 18:56

answered Jul 2, 2018 at 18:22

deowk

4,3181 gold badge27 silver badges34 bronze badges

2 Comments

Satria stuart Over a year ago

I'm sorry I just edited my question , that's what I really mean to do because if I just use privilege.cmsmenuschild it keep using the id and name payload and my goal is to change the payload to key and title as well

deowk Over a year ago

could cmsmenuchild also have it's own cmsmenuchild property?

Collectives™ on Stack Overflow

how to map inside a map in React

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related