What is the React.js way of handling visibility=hidden?

Question

React does not support the visibility attribute for elements.

So if I want to show or hide an element on the page, but still have it take up space when hidden so the layout doesn't shift, how do I do something like this?

<i className="fa fa-trash" visibility={this.state.showButton ? "visible": "hidden"} />

Answer 1

You can use CSS for this.

<i className="fa fa-trash" style={{visibility: this.state.showButton ? 'visible' : 'hidden' }} />

Learn more about inline styles in React

Answer 2

You can use a CSS class for that and dynamically modify your className. For example:

<i className={this.state.showButton ? "fa fa-trash" : "fa fa-trash hidden"} />

Answer 3

This is a css-attribute so you can use inline-styles:

...
var visibilityState = this.state.showButton ? "visible" : "hidden";
return (
  <i className="fa fa-trash" style={{visibility: visibilityState}}/>
);
...