Nested if else condition in JSX

Question

I am trying to write a nested IF ELSE condition in JSX but its not working. Can anyone please help how to write the below condition in JSX?

if (content) {
    if (content.flag) {
        <showSomeComponent />
    }else if (!content.flag) {
        <showSomeOtherComponent />
    }
}

Thanks in advance.

Does this answer your question? [if-else statement inside jsx: ReactJS](https://stackoverflow.com/questions/44046037/if-else-statement-inside-jsx-reactjs) — Emile Bergeron, Apr 22 '20 at 14:27

Dennis Vash · Answer 1 · 2020-04-22T14:27:54.003

You need a return statement and Uppercased component name:

if (content) {
  if (content.flag) {
    return <ShowSomeComponent />;
  } else {
    return <ShowSomeOtherComponent />;
  }
}

Note: Always start component names with a capital letter. React treats components starting with lowercase letters as DOM tags.

Or with optional chaining and ternary operator:

// return content && content.flag ? <ShowSomeComponent /> : <ShowSomeOtherComponent />
return content?.flag ? <ShowSomeComponent /> : <ShowSomeOtherComponent />;

Han · Accepted Answer · 2020-04-22T14:36:55.927

1

You could write it in

const asd = content && content.flag ? <ShowSomeComponent /> : <ShowSomeOtherComponent />

const asd = content && content.flag && <ShowSomeComponent /> || <ShowSomeOtherComponent />

return content && content.flag && <ShowSomeComponent /> || <ShowSomeOtherComponent />

return content?.flag ? <ShowSomeComponent /> : <ShowSomeOtherComponent />;

edited Apr 22 '20 at 14:36

answered Apr 22 '20 at 14:19

Han

361
1
6

Thanks, Han, I tried this actually like this {content && content.flag ? : } is this correct? – Max Apr 22 '20 at 14:24
You need uppercase for the component's name. – Dennis Vash Apr 22 '20 at 14:25
Yes Dennish you are right my typo. But problem here is the structure of the condition. – Max Apr 22 '20 at 14:28

Nested if else condition in JSX

2 Answers2