React render multiple buttons in for loop from given integer

Your for loop terminates after the first iteration because return terminates the function call immediately. You need to accumulate the JSX elements in an array and use that instead. You also don’t need the function displayProgressBar at all.

const ProgressBar = (props) => {
  const { activeStep, totalSteps } = props;

  const steps = [];
  for (let i = 1; i <= totalSteps; i++) {
    steps.push(<div>Hello</div>);
  }
  
  return (<div className="progressBar">{ steps }</div>);
};

You should probably add an active class or something to the activeStep item so it is selected, change steps.push(...) from above to:

steps.push(<div className={ i == activeStep ? "active" : "" }>Hello</div>);

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top