如何在ReactJs样式中有条件地调用不同的className

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, ie 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.

Answer 1

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}/>