adding display to react component conditionally?

user_19222039 0
Viewed 54

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;
reactjs javascript
3 Answers

This seems like partly a duplicate of this question.

You can set your values of a class dynamically like this:

renter() { 
  return (
    <div className={is_displayed ? "showItClassName" : "dontShowItClassName"} > 
      ...
    </div>
  );

This is probably the better way because you can re-use your css classes. You can create variables ahead of time with the class name or call a function if you don't want the conditional in the middle of the html tag.

If your sure you want to use an style tag you need the extra curly braces.

render() {
  return (
    <div style={is_displayed ? {display:"block"}: {display:"none"}} >
           <Component A/>
           <Component B/>
          <Component C/>

    </div>
  );
user_40192730

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>
user_97516970

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

{true_condition && ( <Component /> )}
user_111656480
Related