return two elements inside the first part of ternary operator in JSX

December 13, 2022

I am using a function to show some components using the map function, i want to add an extra component staticlly, i am having trouble adding it in the first part of ternary operator in JSX.

Here is how i add the dynamic components with map function :

{
    this.state.loading ?
        <LoaderComponent/> :
        this.state.status ?
            this.state.config.map((input, key) => {
                return (this.getComponent(input, key))
            }) : ''
}

And here is how i tried to add the static component after the map function, i tried to add the two elements inside () but in vain

{
    this.state.loading ?
        <LoaderComponent/> :
        this.state.status ?
            (
                this.state.config.map((input, key) => {
                    return (this.getComponent(input, key))
                })
                <ExtraComponent/>
            ) : ''
}

>Solution :

You can use React Fragment.

   {
    this.state.loading ?
        <LoaderComponent/> :
        this.state.status ?
                <>
                   {this.state.config.map((input, key) => {
                    return (this.getComponent(input, key))
                    })}
                   <ExtraComponent/>
                </>
            : ''
}