Show or hide element in React
React circa 2020
In the onClick callback, call the state hook's setter function to update the state and re-render:
const Search = () => { const [showResults, setShowResults] = React.useState(false) const onClick = () => setShowResults(true) return ( <div> <input type="submit" value="Search" onClick={onClick} /> { showResults ? <Results /> : null } </div> )}const Results = () => ( <div id="results" className="search-results"> Some Results </div>)ReactDOM.render(<Search />, document.querySelector("#container"))<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script><div id="container"> <!-- This element's contents will be replaced with your component. --></div>React circa 2014
The key is to update the state of the component in the click handler using setState. When the state changes get applied, the render method gets called again with the new state:
var Search = React.createClass({ getInitialState: function() { return { showResults: false }; }, onClick: function() { this.setState({ showResults: true }); }, render: function() { return ( <div> <input type="submit" value="Search" onClick={this.onClick} /> { this.state.showResults ? <Results /> : null } </div> ); }});var Results = React.createClass({ render: function() { return ( <div id="results" className="search-results"> Some Results </div> ); }});ReactDOM.render( <Search /> , document.getElementById('container'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script><div id="container"> <!-- This element's contents will be replaced with your component. --></div>
<style type="text/css"> .hidden { display:none; }</style>const Example = props => <div className={props.shouldHide? 'hidden' : undefined}>Hello</div>
Here is an alternative syntax for the ternary operator:
{ this.state.showMyComponent ? <MyComponent /> : null }is equivalent to:
{ this.state.showMyComponent && <MyComponent /> }Also alternative syntax with display: 'none';
<MyComponent style={this.state.showMyComponent ? {} : { display: 'none' }} />However, if you overuse display: 'none', this leads to DOM pollution and ultimately slows down your application.