ReactJs: How to change color of multiple divs together using if else

Question

I need some sugegstion how can I update color of multiple divs accordingly with if - else condition. I am creating one progressbar where the value will be changes asynchronously so want to change the divs accordingly.

For ex: if value is 1 to 10 first div will be colored, if value is 10 to 20 both div 1 and div 2 needs to be colored and so on. Any help/suggestion please.

Code

class TestPage extends Component {

  constructor(props) {
    super(props)
    
    this.divStyle = {
      backgroundColor: "lightgray"
    } 
        
  }

  progressValue(value) {
    if(value >= 0 && value <= 10){
      
      this.divStyle = {
        backgroundColor: "red"
        } 
      
    } else if (value >= 10 && value <= 20) {
      this.divStyle = {
        backgroundColor: "green"
        } 
    }
  }

  render() {
    const value = 30 ;
    this.progressValue(value);
    
    return (
          <div class="container">
            <div class="progress-segment">
              <div class="item " id="item" style={this.divStyle}></div>
              <div class="item "></div>
              <div class="item "></div>
              <div class="item "></div>
              <div class="item"></div>
              <div class="item "></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item "></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>

            </div>
          </div>
          
     );
  }
}

export default  withStyles(styles)(TestPage);

Design

Please let me know if this is the best preactise to handeling such cases as well

Answer 1

Below I will show you more idiomatic way to compute styles based on a variable. Here is also sample implementation of one kind of a progress bar:

 const SIZE = 30;

export default class Counter extends Component {
  state = {
    count: 0
  };

  decrementCount = () => {
    this.setState((state, props) => ({
      count: state.count > 0 ? state.count - 1 : state.count
    }));
  };

  incrementCount = () => {
    this.setState((state, props) => ({
      count: state.count < SIZE ? state.count + 1 : state.count
    }));
  };

  render() {
    return (
      <div>
        {this.state.count}
        <div style={{ display: "flex" }}>
          {Array(3)
            .fill(0)
            .map((x, i) => {
              return (
                <div
                  style={{
                    width: 10,
                    height: 10,
                    margin: 5,
                    background:
                      this.state.count > i * 10 &&
                      i < (this.state.count + 1) * 10
                        ? "green"
                        : "white"
                  }}
                />
              );
            })}
        </div>
        <button onClick={this.decrementCount}>-</button>
        <button onClick={this.incrementCount}>+</button>
      </div>
    );
  }
}