Home » Reactjs » How to CSS display:none within conditional with React JSX?

How to CSS display:none within conditional with React JSX?

Posted by: admin January 29, 2018 Leave a comment


I’m trying to render a div on the same page when the user clicks on a link.

My HTML page:

<div class="stores">
  <ul class="stores">
    <li><a href="#" onClick={this.onClick} >Store A</a></li>
    <li>Store B</li>
    <li>Store C</li>

My components/store.js.jsx:

var Store = React.createClass({
  getInitialState: function() {
    return { showStore: false };
  onClick: function() {
      this.setState({ showStore: true });
  render: function() {
    <div className="row account stores" style={{display: { this.state.showStore ? 'block' : 'none'} }}>
      <div>a lot more divs</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?


This is due to incorrect usage of the ternary operator. See documentation here:

You should not wrap it with {} as you have done.

Try the following:

style={{display: this.state.showStore ? 'block' : 'none' }}