I want to return 2 button in conditional react native

Question

I'm using react native 0.59.9 and i want to return 2 button in 1 conditional. but it didn't work. if just one button, it works fine but if i put 2 button i got some error

i tried put () in conditional but it didnt work

{this.props.options.config.editable ?
    <Button
        onPress={ () => this.bottomSheet.open()
        }
        color={buttonTextColor}
        title={locals.config.title}
    />
   //this button make the error
    <Button 
        onPress={() => this.bottomSheet.open()
        }
        color={buttonTextColor}
        title={locals.config.title}
    />
    :
    <View/>
}

i want the conditional return that 2 button

Answer 1

Wrap both button in the same container or React.fragment.

{ this.props.options.config.editable ?
    <React.Fragment>
        <Button
            onPress={
                Platform.OS === 'ios'
                    ? this._onPressImage
                    : () => this.bottomSheet.open()
            }
            color={buttonTextColor}
            title={locals.config.title}
        />
        //this button make the error
        <Button 
            onPress={
                Platform.OS === 'ios'
                    ? this._onPressImage
                    : () => this.bottomSheet.open()
            }
            color={buttonTextColor}
            title={locals.config.title}
        />
    </React.Fragment>
:
<View/>

}

Answer 2

In React, you need to have a single parent element that is rendered. Try wrapping your buttons with React.Fragment . Like this:

<>
    <Button
        onPress={ () => this.bottomSheet.open()
        }
        color={buttonTextColor}
        title={locals.config.title}
    />
   //this button make the error
    <Button 
        onPress={() => this.bottomSheet.open()
        }
        color={buttonTextColor}
        title={locals.config.title}
    />
</>