React/Javascript - Need a better solution for progress bar logic

Question

I have progressbar in my project which takes in a range of values and i have added validation according to that. it is working but seems a lot of repetition. Need a better solution. Here is the code :-

const ProgressBar = ({ price }) => {
  return (
    <div className="bar">
      {price === 1 && (
        <React.Fragment>
          <span className="percentage one" />
          <span className="percentage two" />
        </React.Fragment>
      )}
      {price === 2 && (
        <React.Fragment>
          <span className="percentage one" />
          <span className="percentage two" />
          <span className="percentage three" />
        </React.Fragment>
      )}
      {price === 3 && (
        <React.Fragment>
          <span className="percentage one" />
          <span className="percentage two" />
          <span className="percentage three" />
          <span className="percentage four" />
        </React.Fragment>
      )}
    </div>
  );
};

So the price above can be 1,2,3 or 4 and I am making checks according to the number and then rendering a range of spans with the classes one, two, three, four. If a number is 2 then it will render 2 spans with class one and two. Can someone suggest a better solution?

`const ProgressBar = ({ price }) => { return (

); };` And create the correspondent CSS classes that match the output you want through CSS properties. You could even just need one HTML element (the div) depending on the design. — Dez, Apr 29 '18 at 22:19
@Dez but the price is a Number, not a string. Plus I need spans as per the number. If price is 3 then I need 3 spans with classes one, two, three — MontyGoldy, Apr 29 '18 at 22:21
@MontyGoldy in the example you gave, price of 3 gives 4 spans. Is that right? — Colin Ricardo, Apr 29 '18 at 22:38

Warpy · Answer 1 · 2018-04-29T22:32:54.280

2

How about this:

const ProgressBar = ({ price }) => {
  return (
    <div className='bar'>
      {price >= 0 && <span className="percentage one" />}
      {price >= 1 && <span className="percentage two" />}
      {price >= 2 && <span className="percentage three" />}
      {price >= 3 && <span className="percentage four" />}
    </div>
  );
};

edited Apr 29 '18 at 22:32

answered Apr 29 '18 at 22:27

Warpy

21
3

Colin Ricardo · Answer 2 · 2018-04-29T22:48:03.350

1

Would something like this work? (Updated to add old class names).

const ProgressBar = ({ price }) => {
  const n = price + 1;
  const temp = Array(n).fill();

  const map = {
    1: 'one',
    2: 'two',
    3: 'three',
    4: 'four',
  }

  return (
    <div className="bar">
      <React.Fragment>
        {temp.map((_, i) => {
          return <span className={`percentage${map[i]}`} />;
        })}
      </React.Fragment>
    </div>
  );
};

edited Apr 29 '18 at 22:48

answered Apr 29 '18 at 22:37

Colin Ricardo

16,488
11
47
80

This seems to do the trick, but it changed the span className from 'percentage one' to 'percentage1', 'percentage two' to 'percentage2', etc. – Steve Wilhelm Apr 29 '18 at 22:44
Yeah, you can just change the classes in CSS accordingly, or add in a map to this function if you must have those class names. – Colin Ricardo Apr 29 '18 at 22:46
Or use something like https://stackoverflow.com/questions/11980087/javascript-words-to-numbers if the progress bar is going to go from 1 to 100. – Steve Wilhelm Apr 29 '18 at 23:38

React/Javascript - Need a better solution for progress bar logic

2 Answers2