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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #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
You might also like these
$this Keyword in PHPPHPHow to reprocess failed items in Etrieve Flow?MiscellaneousHow to draw an SVG path on scroll using JavaScript?JavaScriptHow to create Flickering Texts using CSS?CSSHow to Use Aggregate Functions (MIN, MAX, SUM, AVG, COUNT) to Summarize Data in SQL?SQL/MySQLHow to change CSS with JavaScript?CSS6 Different Functions to Sort Arrays in PHPPHPHow to Create a Backup From Any Database in SQL?SQL/MySQLLearn to create your skill bar using CSSCSSA list of wp-cli commands to use via SSHWordPressHow destructuring works in React?ReactIntroduction to components and templates Part 4: Pipes and DirectivesAngular