How to create a function that renders a component with map? - reactjs

Question

I'm trying to render a component that is actually created from a request from the backend, which brings me an array and so on.
However, I am getting the following error in the component:
const RouteMicrofrontend: () => false | (JSX.Element | undefined)[][]
'RouteMicrofrontend' cannot be used as a JSX component.
Its return type 'false | (Element | undefined)[][]' is not a valid JSX element.
Type 'boolean' is not assignable to type 'ReactElement<any, any>'.ts(2786)
Is it possible to create a function that renders a component from .map? How to do this?
const RouteMicrofrontend = useCallback(
() =>
microfrontendNav.length > 0 &&
microfrontendNav.map(({ ListMenu }) =>
ListMenu.map(
({ microfrontend }) =>
microfrontend && (
<Route key={microfrontend.registry} path={microfrontend.data.basename}>
<MicrofrontendContainer>
<Loader
service={microfrontend.service}
module={microfrontend.module}
registry={microfrontend.registry}
data={microfrontend.data}
fallback={<MicrofrontendFallback />}
suspense={<MicrofrontendSuspense />}
/>
</MicrofrontendContainer>
</Route>
)
)
),
[microfrontendNav]
);
return (
<BrowserRouter>
<MicrofrontendNav sectionList={microfrontendNav} />
<TickerCarousel />
<Header />
<Switch>
<Route exact path='/' component={() => <div />} />
<Route exact path='/404' component={() => <Error404 />} />
<RouteMicrofrontend />
<Route path='*' component={() => <Redirect to='/404' />} />
</Switch>
</BrowserRouter>
);

Answer 1

The provided compiler error pretty much explains the whole problem. Type false | (Element | undefined)[][] is not a valid React component.
You cannot return multiple elements from a component function (DOM diffing, etc.). Change your code that the RouteMicrofrontend function returns: null when the conditions are not met or a single element with map contents as children.

Answer 2

Aside - You cannot return false from a React component. If you want to render nothing from a React component, return null.
You can conditionally render something (such as an array) using the ternary operator.
Imagine you want to render an Array<Item>:
interface ItemModel {
}
function Item({ item } : { item: ItemModel }) {
return (<div>Render Something Here</div>);
}
function MicroFrontend({ items }: { items: Item[] }) {
return (
<>
...
{ items.length && <h1>Items</h1> }
{ items.length > 0 ? items.map(item => <Item item={item} />) : null }
...
</>
);
}