Reactjs Nested Array Mapping

Question

Hi I am trying to map a nested array my json is like this

JSON

[
  {
    "cat_id": 24,
    "cat_name": "Test1",
    "parent_id": 0,
    "sub_cat": [
      {
        "cat_id": 30,
        "cat_name": "SubTest1",
        "parent_id": 24
      }
    ]
  },
  {
    "cat_id": 18,
    "cat_name": "Test2",
    "parent_id": 0,
    "sub_cat": [
      {
        "cat_id": 32,
        "cat_name": "SubTest2",
        "parent_id": 18
      }
    ]
  }
]

I tried this but got error - Parsing error: Unexpected token, expected ","

{

 categories.map((row, key)=>(
 
   <Nav.Link href="#" key={key}>{row.cat_name}</Nav.Link>
        
     {
       row.sub_cat.map((subcat, sub_key) => ( 
         <Nav.Link href="#">{subcat.cat_name}</Nav.Link>
         ))
     }
 
   ) )
}

Any help would be greatly appreciated.

SuleymanSah · Accepted Answer · 2022-08-23 17:45:39Z

4

In react we can only have one parent JSX element, you need to wrap the contents of the second map with a parent element like React fragment:

{categories.map((row, key) => (
    <>
        <Nav.Link href="#" key={key}>
            {row.cat_name}
        </Nav.Link>
        {row.sub_cat.map((subcat, sub_key) => (
            <Nav.Link href="#">{subcat.cat_name}</Nav.Link>
        ))}
    </>
))}

Related docs:

Also your data seems to have natural unique ids, so you had better to use them as key instead of the index.

{categories.map(row => (
    <>
        <Nav.Link href="#" key={row.cat_id}>
            {row.cat_name}
        </Nav.Link>
        {row.sub_cat.map(subcat => (
            <Nav.Link href="#" key={subcat.cat_id}>{subcat.cat_name}</Nav.Link>
        ))}
    </>
))}

edited Aug 23, 2022 at 17:45

answered Aug 23, 2022 at 9:27

SuleymanSah

18k6 gold badges38 silver badges60 bronze badges

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

3 Comments

sanu Over a year ago

Perfect thanks but where do I get to know more about on this topic??

SuleymanSah Over a year ago

@sanu in the official docs https://reactjs.org/docs/fragments.html

SuleymanSah Over a year ago

and https://beta.reactjs.org/learn/writing-markup-with-jsx#1-return-a-single-root-element

Collectives™ on Stack Overflow

Reactjs Nested Array Mapping

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related