Click here to Skip to main content
15,884,388 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I am trying to hide the components conditionally 

is there a way to dynamically add display to div via state?

since all the components are in Div , how to isolate each rendered component and add display none ?

is there a way to add the state that can trigger css / add css to certain react component?
import React, { Component } from 'react';
import all the component A, B AND C

class App extends Component {
   constructor(props) {
    this.state = {};

  render() {
    return (
               <Component A/>
               <Component B/>
              <Component C/>


export default App;

What I have tried:

method 1: 
 to add style = display : none to div 

method 2 :
managing via state
but have got some difficulties

method 3:
2 css style sheets
Member 15627495 7-Jun-22 1:54am    
style is a legit attribute for 'div'
<div style="display:none;"> // it works to hide 

look in react how to add attribute to a tag, maybe you need 'id="myTag"' to locate the tag you wanna reach.

or prepare a css field

.hide{display:none;}and add a class to your tag by react ( class is an attribute for tags too )
{ really sorry I can't help more because I don't use react }

diplay:none is the best way to hide some tags from the display of a page.
to reverse that, just go back by display:block;/inline/inline-block ... ( all display values )

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900