adding display to react component conditionally?-CodePudding

I am trying to hide the components conditionally

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

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) {
     super(props);
    this.state = {};
  }
  

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

      </div>
    );
  }
}

export default App;

CodePudding user response：

Per Choosing the Type at Runtime:

import { ComponentA } from './ComponentA';

<div>
  {(() => {
    // capitalized variable first
    let Component = <p>Error!</p>;
    if (/google/.test(this.state.url)) {
      Component = ComponentA
    }
    return <Component />
  })()}
</div>

CodePudding user response：

You can render the component conditionally instead of tto use css to make this:

{true_condition && ( <Component /> )}