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;
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>
);
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>
You can render the component conditionally instead of tto use css to make this:
{true_condition && ( <Component /> )}