Faster way to show/hide components? Toggle component or toggle display?

• Toggle Component

render(){
  var Child = something? A : B;
  return (
    <Child />
  ) 
}

• Toggle CSS Display is simple

className={this.props.shouldHide ? 'hidden' : ''} 

[sophiebits]

Writing {this.props.isHidden ? null : <SomeComponent/>} (or simpler, {!this.props.isHidden && <SomeComponent/>}) is easy and reduces the number of magic props you’d need to remember.

[MicronXD]

I also hate magic, but I think this could do so much for clean jsx markup that its magic-like behavior could be forgiven.

This muddies otherwise clean jsx markup: { !hideSomeComponent && <SomeComponent /> }

that could otherwise be handled like: <SomeComponent hidden={hideSomeComponent} />

---

It feels so gross doing this:

    <div>
        <img src="example.jpg" />
        { !hideSomeComponent && <SomeComponent>
            Example
        </SomeComponent>}
    <div>

instead of this:

    <div>
        <img src="example.jpg" />
        <SomeComponent hidden={hideSomeComponent}>
            Example
        </SomeComponent>
    <div>

---

I don’t think this would be the sort of magic where someone sits and wonders, “What does hidden do?”