What is the best way to update a Classname field based on the state of a react ponent?

I have a variable called inverted in the state of my react ponent and want to update the classname of a number of my divs based on whether it is true or false.

What is the best way to go about this? Should I have a separate method to update the classnames? And if so, how do I deal with the asynchronicity of the setState method? If I should update it within the div, what is the best way to do this?

What is the best way to update a Classname field based on the state of a react ponent?

I have a variable called inverted in the state of my react ponent and want to update the classname of a number of my divs based on whether it is true or false.

What is the best way to go about this? Should I have a separate method to update the classnames? And if so, how do I deal with the asynchronicity of the setState method? If I should update it within the div, what is the best way to do this?

• javascript
• reactjs

Share Improve this question Follow asked Feb 18, 2017 at 3:46 Tevon Strand-BrownTevon Strand-Brown 1,73833 gold badges2020 silver badges3030 bronze badges 4

• 1 You could do: let className = this.state.inverted ? "isTrue" : "isFalse"; <div className={className}>...</div> – Andrew Li Commented Feb 18, 2017 at 3:56
• 1 I've tried this, but, while className (the constant) changes perfectly, the actual classname of the div doesn't update. Any idea why it wouldn't change? – Tevon Strand-Brown Commented Feb 18, 2017 at 4:12
• 1 It should. When state changes the whole ponent is rerendered... – Andrew Li Commented Feb 18, 2017 at 4:13
• @TevonStrand-Brown See this fiddle: jsfiddle/9n8tehke – Hardik Modha Commented Feb 18, 2017 at 5:44

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

Setting a function might help if you need the same className on different methods; or if your render method is so big that you need to break it in small pieces. But usually you only need the className in the render method.

If you have several divs that need the same className, I remend to just use a local variable inside the render method. That will keep the code simple to follow and short. Check the following code snippet for an example of that:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inverted: true
    };
    this.toggleInverted = this.toggleInverted.bind(this);
  }

  toggleInverted() {
    this.setState({inverted: !this.state.inverted});
  }

  render () {
    const classNameDivs = this.state.inverted ? 'sky-blue' : 'red';
    return(
      <div>
        <input type="checkbox" checked={this.state.inverted} onChange={this.toggleInverted} />
        <div className={classNameDivs}>&nbsp;</div>
        <div className={this.state.inverted ? 'white' : 'yellow'}>
          {this.state.inverted ? 'Argentina' : 'España'}
        </div>
        <div className={classNameDivs}>&nbsp;</div>
      </div>
    )
  }
}

ReactDOM.render(<MyComponent />, document.getElementById('container'));

.red {
  background-color: #c60b1e;
}
.yellow {
  background-color: #ffc400;
}
.sky-blue {
  background-color: #74acdf;
}
.white {
  background-color: white;
}

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"/>

But you usually don't need to set a className more than once, because usually you can handle it better via CSS. For instance, the conditional className can be used at the parent element of all the divs. The divs then will have a regular className in JS and will use the conditional parent in the CSS side. Same example as before, but defining the conditional className only once in JS, in the following snippet:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inverted: true
    };
    this.toggleInverted = this.toggleInverted.bind(this);
  }

  toggleInverted() {
    this.setState({inverted: !this.state.inverted});
  }

  render () {
    return(
      <div className={this.state.inverted ? 'argentina-flag' : 'espania-flag'}>
        <input type="checkbox" checked={this.state.inverted} onChange={this.toggleInverted} />
        <div className='top-bottom'>&nbsp;</div>
        <div className='middle'>{this.state.inverted ? 'Argentina' : 'España'}</div>
        <div className='top-bottom'>&nbsp;</div>
      </div>
    )
  }
}

ReactDOM.render(<MyComponent />, document.getElementById('container'));

.espania-flag .top-bottom {
  background-color: #c60b1e;
}
.espania-flag .middle {
  background-color: #ffc400;
}
.argentina-flag .top-bottom {
  background-color: #74acdf;
}
.argentina-flag .middle {
  background-color: white;
}

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"/>