How to conditionally call different classNames in ReactJs styling

Question

I have a progressBar in my React component.The progressBar is as shown below in the image:

So, when I am in the second page, the style be as shown below:

And the next image is for the third page:

So, what I have done is I have created the styling for the second page.

The code looks like this:

<div className={classes.sceProgressBar}>
  <div className={classes.sceProgressBarText}>
    <i className={ 'fas fa-check ' + this.progressBarStyleHandler} />
  </div>
</div>
<hr className={classes.sceProgressBarUnderline} />
<div className={classes.sceProgressBarSecondText}>

  <div className={classes.sceProgressBarText}>2</div>
  <hr className={classes.sceProgressBarSecondUnderline} />
</div>
<div className={classes.sceProgressBarThirdText}>
  <div className={classes.sceProgressBarText}>3</div>
</div>

Now what I want is, I want to make it a common component, so that for each page I don't have to add the style,I can directly import the page and show which page it is by passing the page details in the props.

So, I have added 9 states :

this.state = {
  firstPage: false, //white background for Progress Bar
  secondPage: false,
  thirdPage: false,
  firstPageDisplay: false, //green background for Progress Bar
  secondPageDisplay: false,
  tihrdPageDisplay: false,
  firstPageCompleted: false, //tick mark for Progress Bar
  secondPageCompleted: true,
  thirdPageCompleted: false

};

And, I have added a function where it will check the value of the state which will determine which page it is in.The function looks like this:

progressBarStyleHandler = () => {
  let progressbarClassname;
  if (this.state.firstPageCompleted) {
    progressbarClassname = classes.sceCheckIcon;
  }
  return progressbarClassname;
}

But for my current page, the function is not working, i.e. its not taking the className. What is wrong with my code?Can anyone please help me with that. Also, if anyone can suggest a better way of doing it, I will follow the same.

Possible duplicate of [ReactJS add dynamic class to manual class names](https://stackoverflow.com/questions/36209432/reactjs-add-dynamic-class-to-manual-class-names) — Alwaysblue, Dec 19 '18 at 07:21

score 0 · Answer 1 · answered Dec 19 '18 at 07:55

You are not actually calling your style handler.

You need to have className={'fas fa-check ' + this.progressBarStyleHandler()} instead of className={'fas fa-check ' + this.progressBarStyleHandler}.

But your approach of managing three booleans per page will not scale well. What if you want to re-use this component and have additional steps? I suggest an approach like below:

function Step({ number, status="NOT_DONE" }) {
  switch (status) {
    case "DONE":
      return <div className="done"><i className="fas fa-check"/></div>
    case "CURRENT":
      return <div className="active">{number}</div>
    case "NOT_DONE":
    default:
      return <div className="not-done">{number}</div>
  }
}

function ProgressBar({ numberOfSteps = 0, currentStep = 0 }) {
  if (!numberOfSteps) return null;

  const steps = [];
  for (let i = 0; i < numberOfSteps; i++) {
    const status = i < currentStep ? 'DONE' : i === currentStep ? 'CURRENT' : 'NOT_DONE';
    steps.push(<Step number={i} status={status} />)
  }

  return (
    <div>
      {steps}
    </div>
  )
}

And then it can be used like <ProgressBar numberOfSteps={3} currentStep={1}/>

Thanks for the answer. I will try it out the way you suggested and let you know if its working fine. Just give me few mins. — pranami, Dec 19 '18 at 08:00
I didn't get the part where you are calling Step function like `()`, I mean its throwing an error saying `Step is not defined` — pranami, Dec 19 '18 at 08:19
`Step` is just a functional component. docs: https://reactjs.org/docs/components-and-props.html — Rachel Church, Dec 19 '18 at 23:27

How to conditionally call different classNames in ReactJs styling

1 Answers1