Question

0

252

Views

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

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

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-24T18:00:34.059Z

This should help you

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

Answer 2 · 2022-06-24T18:00:34.072Z

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

Try this pls

0

252

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

2 answers

0

0

Find remote jobs

Andres GPT