Yogesh Chauhan's Blog

How to show and hide an element on click in React?

in React on May 7, 2021

Just return null instead of the rendered output to hide a component.

You can hide the component even when it’s being rendered using another component.

Something like this:


...
  if (!props.content) {
    return null;
  }
...

Render the element like the way you usually do:



...
   <Content content={this.state.showContent} />
...


Here’s the working example:

This is really useful with conditional rendering.


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface #Jan 14 How to display a student’s individual transcript in Colleague? #Jan 11 How to install PuTTY on a MacOS? #Jan 8 How to Install Xcode Command Line Tools on MacOS?
You might also like these
Solution to “Call to undefined function mysql_error()” in RevSlider WordPress PluginWordPressGlobal JavaScript methods to convert variables to numbersJavaScriptPHP Login System using PDO Part 2: Login using Email or UsernamePHPJavaScript Input Validation Theme Park Example using throw StatementJavaScriptHow to solve “framework not found” error in Swift?SwiftThe difference between isFinite() method and isFinite() function in JavaScriptJavaScriptHow to use $IF operator in Envision Basic?Envision BasicWhat is the difference between float and double?MiscellaneousHow to Validate User Name, Email Address and URL in PHP?PHPWhat are Web services?MiscellaneousHow to check if the page is the home page in WordPress?WordPressThe :last-of-type selectorCSS