5 ms·

Conditional-markup solutions always look inelegant. I'd bet this looks absolutely crazy to many developers: <div *ngIf="foo; then bar else baz"></div> An

• christophilus 9y ago
  They don't look bad in ClojureScript, IMO. JS: const sampleComponent = () => { return isTrue && <p>True!</p> }; CLJS: (defn sample-component [is-true?] (when is-true? [:p "True!"])) Any language that has if expressions would be preferable to JS in this case, I think.
• rajangdavis 9y ago
  This is best and worst part about Angular. You have this declarative way of rendering parts of a page, but once this gets abused, it becomes a pain in the ass to understand the control flow.
• travmatt 9y ago
  I don't understand how you'd make a declarative style any more elegant? <Conditional bool={true}> <IfTrue/> <IfFalse/> </Conditional> Doesn't seem any better
  • exogen 9y ago
    The reason OP's complaint is a bit silly is because JSX is just JavaScript and there's no need to be doing everything in a single JSX expression in the first place. That would be bad code just like any other situation. Do what you'd do in normal JavaScript code: use multiple statements and put the conditional elsewhere. Given complicated conditionals, an experienced React dev would do: render() { let foo if (someCondition) { foo = <ChildFoo/> } return ( <Bar> {foo} </Bar> ) } or: renderChildFoo() { if (someCondition) { return <Foo/> } } render() { return ( <Bar> {this.renderChildFoo()} </Bar> ) } or if possible, always render <Foo/> and conditionally return null in Foo's own render() method.
    • couchand 9y ago
      > JSX is just JavaScript No, it's not. It's the bastard child of XML and JavaScript. I agree that your examples are about the best you can do with JSX. But actually just JavaScript is much easier: render() { return Bar(someCondition && Foo()) } or render() { return Bar(someCondition ? Foo() : null) } That's not quite hyperscript but it's not far from it.
      • AnkhMorporkian 9y ago
        I believe the OP was saying that JSX is transformed into pure javascript, not that it's literally javascript.
      • exogen 9y ago
        Digs at JSX aside, I think you may have lost track of what this thread was about: complicated nested conditionals. These are a pain to do in a single JS expression, JSX or hyperscript or otherwise – even in your example. In JSX your simple example would look just as nice: <Bar>{someCondition && <Foo/>}</Bar>