Return child array using Array.Map() in React

Question

My Data from API looks like below,

[
  {
    "id": 1,
    "appName": "string",
    "defaultAction": "string",
    "defaultMessage": "string",
    "rules": [
      {
        "id": 1,
        "version": "string",
        "brand": "string",
        "action": "string",
        "message": "string"
      },
      {
        "id": 2,
        "version": "string",
        "brand": "new brand",
        "action": "string",
        "message": "string"
      }
    ]
  }
]

I tried like below to read child array from Parent Array from State to bind to table

const { posts } = this.state;
console.log(posts);
   const rule_list = posts.map(rules => {
  console.log(rules);
});

But I see it still returns complete array rather than only child element.Can someone help me here.

What console.log(posts); is prints

Sourabh Somani
– Sourabh Somani

2019-04-12 06:37:19 +00:00
Commented Apr 12, 2019 at 6:37 — Sourabh Somani
– Sourabh Somani, Commented Apr 12, 2019 at 6:37

Code Maniac · Accepted Answer · 2019-04-12 16:14:16Z

2

Rules is complete element at particular index, You need to access the property you want to access i.e rules.rules

Or you can Destructuring_assignment

let data = [ { "id": 1, "appName": "string", "defaultAction": "string", "defaultMessage": "string", "rules": [ { "id": 1, "version": "string", "brand": "string", "action": "string", "message": "string" }, { "id": 2, "version": "string", "brand": "new brand", "action": "string", "message": "string" } ] } ]

const rule_list = data.map(({rules}) => {
  console.log(rules);
});

edited Apr 12, 2019 at 16:14

answered Apr 12, 2019 at 6:38

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

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

1 Comment

Maddy Over a year ago

Hi, if I have 2 parent nodes and child nodes then its returning all the child nodes of both parent nodes. Anything missing here? my API results like below [ { "id": 1, "rules": [ { "id": 1, }, { "id": 2, } ] }, { "id": 2, "rules": [] } ]

Alok Jha · Accepted Answer · 2019-04-12 08:52:59Z

0

You need to access rules property of each post item to get the child rules array as below.

posts.map((post) => {
   console.log(post.rules);
});

if you want to form a rules array from all posts, you can do that as below:

const rule_list = posts.map((post) => {
        let { rules } = post;
        if(rules && rules.length > 0) {
            return rules;
        }
    });
console.log(rule_list);

edited Apr 12, 2019 at 8:52

answered Apr 12, 2019 at 6:45

Alok Jha

3633 silver badges9 bronze badges

Collectives™ on Stack Overflow

Return child array using Array.Map() in React

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related