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>
    );

})}

Zhivko Zhelev · Accepted Answer · 2021-02-05 08:07:34Z

1

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>
    );

answered Feb 5, 2021 at 8:07

Zhivko Zhelev

3534 silver badges12 bronze badges

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

Comments

Jitesh Narula · Accepted Answer · 2021-02-05 07:08:57Z

0

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>
    );
})}

answered Feb 5, 2021 at 7:08

Jitesh Narula

3863 silver badges7 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related