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.
You need to return the result of filter
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} />;
});
}