CODEWITHSUNDEEP
javascriptreactjs
Tevon Strand-Brown
Tevon Strand-Brown

Reputation: 1708

Best way to update className based on react component state

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

I have a variable called inverted in the state of my react component 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?

Upvotes: 5

Views: 14582

Answers (1)

Mariano Desanze
Mariano Desanze

Reputation: 8163

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 recommend 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.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/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.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"/>

Upvotes: 2

Related Questions