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

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/>
            ) : ''
}

CodePudding user response：

You can use React Fragment.

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

CodePudding user response：

You can achieve this by adding an extra empty element, (React Fragment).

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