Best practices for react conditional rendering?

Question

I have a div/section that should be displayed when a button is toggled

{
  this.state.viewButtonClicked ?  <Solution solution= {this.state.activeSolution}/> : <React.Fragment/>
} 

Is using a ternary operator appropriate for this?

And in this case, what's the best practice to not display something if a button is false?

Is React.Fragment okay?

Basically I want to return/render null if viewButtonClicked is false.

Answer 1

yes it should be fine. Additionally you can just do this

  {
       this.state.viewButtonClicked && <Solution solution={this.state.activeSolution}/>
  }