What is the React.js way of handling visibility=hidden?
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"} />
Or you can just do it like this in your react component
{
this.state.showButton && <i className="fa fa-trash" />
}
// Get a hook function
const {useState} = React;
const Example = ({title}) => {
const [visible, setVisible] = useState(false);
return (
<div>
<p>{title}</p>
<button onClick={() => setVisible(!visible)}>
visibility : {!visible ? "hidden" : "showing"}
</button>
{visible && <p>Its toggling visibility</p>}
</div>
);
};
// Render it
ReactDOM.render(
<Example title="Example using Hooks:" />,
document.getElementById("react")
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>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
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}}/>
);
...