YogeshChauhan . com

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.

amazon

Most Read

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

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

JavaScript arrays: a separate data type or Objects?JavaScriptWordPress: How to print ACF array field values?WordPressGive buttons accessible namesUI/UXIntroduction to Angular modules Part 3: NgModules vs JavaScript modules and Angular librariesAngularPostgreSQL transactions using the BEGIN, COMMIT, and ROLLBACK statements.PostgresOOP, Class and Objects Strategies For Beginners (PHP)PHPHTML canvas methodsHTMLHow to change style of nth-child using jQuery?jQuerySQL ALL OperatorSQL/MySQLHow to Make CSS Lists Bullets Smaller?CSSColumn and Table Alias in PostgresPostgresHow to Clone Objects in PHP?Misc