Mapping 2-dimensional array in React-CodePudding

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

CodePudding user response：

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