Feature suggestion: Implement ng-if / v-if equivalent

[olivierr91]

I have worked with VueJS, Angular and now starting to write in React, and I find the conditional rendering syntax of React to be the worst. It is the least concise and least readable of all three syntax.

In Vue (and Angular) you can do conditional rendering using an extremely clean syntax:

<div v-if="var1 == true">Test1</div>
<div v-else-if="var2 == true">Test2</div>
<div v-else-if="var3 == true">Test3</div>
<div v-else>Test4</div>

In React, to get the same result, you have to write some ugly syntax like this:

{var1 == true && <div>Test1</div>}
{var1 == false && var2 == true && <div>Test2</div>}
{var1 == false && var2 == false && var3 == true && <div>Test3</div>}
{var1 == false && var2 == false && var3 == false && <div>Test4</div>}

which has some unnecessary repeating logic. You can also write nested ternary operations:

{var1 == true ? <div>Test1</div> : 
    (var2 == true ? <div>Test2</div> :
        (var3 == true ? <div>Test3</div> :
            <div>Test4</div>))}

which is still pretty ugly and will get even more ugly with more complex DOM nodes. You can also write:

if (var1 == true) {
    return <div>Test1</div>
} else if (var2 == true) {
    return <div>Test2</div>
} else if (var3 == true) {
    return <div>Test3</div>
} else {
    return <div>Test4</div>
}

but this code cannot be put inside another JSX element. I know there are libraries out there that can mimic the Vue syntax but this should be implemented in React natively, and I don't think this would be hard to implement at the JSX to JS transform level.

[gaearon]

Hi there!

It is a fully intentional design decision that you'd use regular JavaScript for conditions instead of a template syntax, and this is not something we intend to change.

Here is how I'd write your example:

let child;
if (var1) {
  child = <div>Test1</div>
} else if (var2) {
  child = <div>Test2</div>
} else if (var3) {
  child = <div>Test3</div>
} else {
  child = <div>Test4</div>
}

return (
  <div>
    {child}
  </div>
);

The == true comparisons are not necessary, and by using a variable you can put the result inside of JSX.

Hope this is reasonable.

[olivierr91]

Vue/Angular is still cleaner than your example and way less code. And yet this is a simple example. If I had nested conditions inside each of those divs this is going to be a hard-to-understand mess. Writing/reading conditional rendering statements along the flow of the DOM is way simpler than extracting that logic at the top. If you need to write more code with a Framework B to achieve the same logic as Framework A than Framework A has a better design. Fact is, Vue/Angular have much better and cleaner conditional rendering design. So no, I don't think this is reasonable, but I know I'm not going to change your mind.

[gaearon]

"Cleaner" is very subjective, as is the claim that less code always indicates a better design. We don't mind some verbosity. React's popularity speaks to the fact that many people find the approach without special syntax cleaner, in a different way.

In longer term it is plausible that we might introduce some nicer syntax to do conditions in the middle of the tree. However, such syntax would be based on JavaScript too (e.g. facebook/jsx#88) rather than on adding a custom attribute syntax and overloading it with semantic meaning.

We don't want to introduce mechanisms other than the ones that already exist in the language. If you find them acceptable for writing JavaScript logic, React asks that you apply the same mindset to your markup. I can totally understand the stylistic preference though, and you're welcome to use other libraries if you strongly disagree with this choice.