How to CSS display:none within conditional with React JSX?
119,541
Solution 1
This is due to incorrect usage of the ternary operator. See documentation here: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
You should not wrap it with {}
as you have done.
Try the following:
style={{display: this.state.showStore ? 'block' : 'none' }}
Solution 2
You can also change a classname and style in CSS.
// outside render
const NORMAL = "row account stores"
const HIDDEN = NORMAL + " hidden"
// In render
render: function() {
return(
<div className={this.state.showStore ? NORMAL : HIDDEN}>
<div>a lot more divs</div>
</div>
);
}
Note that it is generaly better to not use double curly braces {{ in render function as you are often creating a new object on every render execution. for example:
{display: true ? 'block' : 'none' } === {display: true ? 'block' : 'none' } // false
// outside render
const BLOCK = { display: 'block' }
const NONE= { display: 'none' }
// in render
{this.state.showStore ? BLOCK : NONE}
Solution 3
You can also conditionally create the element via
{
this.state.showStore
? <div className="row account stores">
<div>a lot more divs</div>
</div>
: null
}
Author by
StandardNerd
Updated on July 09, 2022Comments
-
StandardNerd almost 2 years
I'm trying to render a
div
on the same page when the user clicks on a link.My HTML page:
<div class="stores"> <h1>Stores</h1> <ul class="stores"> <li><a href="#" onClick={this.onClick} >Store A</a></li> <li>Store B</li> <li>Store C</li> </ul> </div>
My
components/store.js.jsx
:var Store = React.createClass({ getInitialState: function() { return { showStore: false }; }, onClick: function() { this.setState({ showStore: true }); }, render: function() { return( <div className="row account stores" style={{display: { this.state.showStore ? 'block' : 'none'} }}> <div>a lot more divs</div> </div> ); } });
But I get a:
SyntaxError: unknown: Unexpected token
For this line:
style={{display: { this.state.showStore ? 'block' : 'none'} }}
How can I nest conditionally inside a style?
-
wiktor over 7 yearsI can't find in the React documentation, but if you set a style attribute to
null
React doesn't add the attribute to the DOM node at all. So the following only setdisplay: none
or nothing based on the condition.style={{ display: isHidden ? 'none' : null }}
This is useful if you specify display value in css - for example some form of flexbox - and you don't want to hardcode this value in javascript. -
cquezel over 5 years@wiktor you might have read this in the classname library
-
wiktor over 5 years@cquezel Possible. Unfortunately, I did not remember what was the original source of the truth. :( I just use it.