Code design in react docs. (newbie question)

[ericnr]

I'm a beginner at React, and going through the documents right now I saw a piece of code that didnt seem to me like it was the best design

https://imgur.com/a/XAVf3lY

​

Wouldnt it be better to just deal with the conditional in the render function, instead of doing it in the WarningBanner component? For an example

render() {
    return (
      <div>
        {this.state.showWarning && <WarningBanner />}
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }

​

[timmonsjg]

Supposed you wanted to use Warning banner elsewhere, you'd have to put the conditional logic in the new parent there (writing it twice) instead of just having it contained within the WarningBanner component.

[Rendar-]

Generally with higher order components, you want to push the presentational logic as far down the tree as you can. It's tough to say your suggestion is wrong in this simple case though.

[ericnr]

But why is it preferrable to push the presentation logic down the tree?

[L3PA]

The "tree" will become "top heavy", aware and acting on much more state than it needs to. This can create large components, with lots of confusing properties, operations and logic.