React Nested array not working, Cannot read property 'map' of undefined

Question

I am using react functional component. When I run react it outputs this error "TypeError: Cannot read property 'map' of undefined"

Sample Data

const tabData = [{
    key: 0,
    label: 'Theory',
    color: 'primary',
    theory: [{
        key: 0,
        title: 'Analyze one dimensional and two dime',
        content: [
                'Kinematics',
                'Rectilinear motion under constant acceleration',
                'Equations of motion',
        ],
    }]
}];

My function

{tabData.map((data) => {
    return (
        <TabPanel value={value} index={data.key}>
           <ul index={data.key}>
              {data.theory.map((tit) => {
                 return (<li key={tit.key}>{tit.title}</li>);
              })}
          </ul>
        </TabPanel>
    );

})}

Answer 1

You can write something like this

{tabData && tabData.length > 0 && tabData.map((data) => {
    return (
      <TabPanel value={value} index={data.key}>
        <ul index={data.key}>
        {data && data.theory && data.theory.length > 0 && data.theory.map((tit) => {
          return (<li key={tit.key}>{tit.title}</li>);
        })}
        </ul>
     </TabPanel>
    );
})}

Answer 2

Use optional chaining for this case. It's much shorter and cleaner.

{tabData?.map((data) => {
    return (
      <TabPanel value={value} index={data.key}>
        <ul index={data.key}>
        {data.theory.map((tit) => {
          return (<li key={tit.key}>{tit.title}</li>);
        })}
        </ul>
     </TabPanel>
    );