How to nest if-else inside an if in JSX syntax using ternary?-CodePudding

I'm trying to achieve the following in JSX:

if (declineButtonMessage) {
    if (buttonDirection === 'column') {
        render button 1
    } else {
        render button 2
    }
}

I have this so far:

{declineButtonMessage && (
    
)}

And I tried smuggling this inside:

buttonDirection === 'column' ? <StyledDeclineButton buttonDirection={buttonDirection} title={declineButtonMessage} wide onPress={onSecondaryAction} /> : <SecondaryButton buttonDirection={buttonDirection} title={declineButtonMessage} wide onPress={onSecondaryAction} />

But it wasn't working and my linter was going wild. I imagine I'm doing some sort of JSX syntax error

CodePudding user response：

This should help you

{
  declineButtonMessage 
    ? (buttonDirection === 'column' ? <button1 /> : <button2 />)
    : null
}

CodePudding user response：

{!!declineButtonMessage && (buttonDirection === 'column' ? <button1 /> : <button2 />)}

Try this pls