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

CodePudding user response：

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.

CodePudding user response：

Aside - Firstly, 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 }
            ...
        </>
    );
}