return of a function inside a render method is undefined

July 22, 2022

I have a code that kinda looks like this: (I’m omitting some things but…)

render() {
(bunch of props and state)
 return (
  <div>
   <CustomTabs>
    {this.renderTabs()}
   </CustomTabs>
  </div>
}

Where the renderTabs function looks like this:

 renderTabs = () => {
   const { apps } = this.props;
   apps.filter(app => app?.id !== 'Dashboard').map((app, key) => {
     return <CustomTab label={app.id} key={key} />;
   });
  }

According to some console logs, the filter and mapping is working, so the label and the key exists and are set properly. But the return of the function is undefined.

I note that I’m using MUI datatables to do this and that if I delete the function and add multiple by hand instead, it works properly.

Why is this happening? I have lots of code that looks like this and lots of render methods that call another function to help the rendering and they work without problem.

>Solution :

You need to return filtered items:

renderTabs = () => {
   const { apps } = this.props;
   return apps.filter(app => app?.id !== 'Dashboard').map((app, key) => {
     return <CustomTab label={app.id} key={key} />;
   });
  }