Mapping 2-dimensional array in React

Question

Hi I have double dimension JSON array in my app. My outer array working fine but when I code my inner array then app give error and app become stop. my JSON object is as follow

[
   {
    "category_title": "Individual Tax Return",
    "type": "1",
    "id": "1",
    "forms": [
        {
           
            "form_title": "Single",
            "checkBoxfieldName": "IndividualTaxReturn[]",
            "average_hours": "2"
           
        }
     ]
   },
   {
    "category_title": "Payroll",
    "type": "2",
    "id": "6",
    "forms": [
        {
            
            "form_title": "Form 940",
            "checkBoxfieldName": "Payroll[]",
            "average_hours": "1"
            
        }
    ]
  }
]

My Body Code is this

  {
    formsList1.map((items, index) => {
    return (
        <tr>
          <td>
            {items.category_title}
          </td>
        </tr>
        {
          items.forms.map(frm =>{

          return (<tr><td>{frm.form_title}</td></tr>)
          }

        }                         
      );
    })
  }

this giving me error Unexpected token, expected ","

Please guide with thanks

Sachila Ranawaka · Accepted Answer · 2022-12-14 12:03:01Z

1

In the nested list, you need to group the elements if there are multiple elements in the root level

 return (
    <>
      <tr>
        <td>{items.category_title}</td>
      </tr>
      {items.forms.map((frm) => {
        return (
          <tr>
            <td>{frm.form_title}</td>
          </tr>
        );
      })}
    </>
  );

Demo

edited Dec 14, 2022 at 12:03

answered Dec 14, 2022 at 11:56

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

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

Collectives™ on Stack Overflow

Mapping 2-dimensional array in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related