Stepper component in latest Material UI - reactjs

Question

I want to use Material UI horizontal steppers. But I am not able to add content to it. Hence, I thought I'll switch to Bootstrap. I've gone through the documentation and examples (https://getbootstrap.com/docs/5.2/examples/) but did not find any implementation for Stepper. Is there any other package I can use for this? Or is there a way to implement content with Material UI horizontal stepper to achieve the purpose.
This is my current implementation, but it's just not right!
import * as React from 'react';
import Box from '#mui/material/Box';
import Stepper from '#mui/material/Stepper';
import Step from '#mui/material/Step';
import StepLabel from '#mui/material/StepLabel';
import StepContent from '#mui/material/StepContent';
import Button from '#mui/material/Button';
import Typography from '#mui/material/Typography';
import FirstStep from './FirstStep';
import { Grid } from '#mui/material';
const steps = [1, 2, 3];
function getStepContent(number) {
switch (number) {
case 0:
return (
<>
<Grid align="center">
<form class="form-group">
<label>First Name</label>
<input type="text" placeholder="First Name"></input>
<br></br>
<label>Last Name</label>
<input type="text" placeholder="Last Name"></input>
</form>
</Grid>
</>
);
case 1:
return (
<form class="form-group">
<label>High School Percentage</label>
<input type="number" placeholder="High School Percentage"></input>
<br></br>
<label>Graduation percentage</label>
<input type="number" placeholder="Graduation Percentage"></input>
</form>
);
case 2:
return (
<form class="form-group">
<label>Permanent Address</label>
<input type="text" placeholder="Permanent Address"></input>
<br></br>
<label>Temporary Address</label>
<input type="text" placeholder="Temporary Address"></input>
</form>
);
default:
return '';
}
}
export default function EdenSignUp() {
const [activeStep, setActiveStep] = React.useState(0);
const [skipped, setSkipped] = React.useState(new Set());
const isStepOptional = (step) => {
return step === 1;
};
const isStepSkipped = (step) => {
return skipped.has(step);
};
const handleNext = () => {
let newSkipped = skipped;
if (isStepSkipped(activeStep)) {
newSkipped = new Set(newSkipped.values());
newSkipped.delete(activeStep);
}
setActiveStep((prevActiveStep) => prevActiveStep + 1);
setSkipped(newSkipped);
};
const handleBack = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1);
};
const handleSkip = () => {
if (!isStepOptional(activeStep)) {
// You probably want to guard against something like this,
// it should never occur unless someone's actively trying to break something.
throw new Error("You can't skip a step that isn't optional.");
}
setActiveStep((prevActiveStep) => prevActiveStep + 1);
setSkipped((prevSkipped) => {
const newSkipped = new Set(prevSkipped.values());
newSkipped.add(activeStep);
return newSkipped;
});
};
const handleReset = () => {
setActiveStep(0);
};
return (
<Box sx={{ width: '100%' }}>
<Stepper activeStep={activeStep} alternativeLabel='true' >
{steps.map((label, index) => {
const stepProps = {};
const labelProps = {};
if (isStepOptional(index)) {
labelProps.optional = (
<Typography variant="caption"></Typography>
);
}
if (isStepSkipped(index)) {
stepProps.completed = false;
}
return (
<Step key={label} {...stepProps}>
<StepLabel {...labelProps}>
{label}</StepLabel>
{/* <Typography>
{getStepContent(label)}
</Typography> */}
<StepContent orientation = 'horizontal'>
<Typography>{getStepContent(index)}</Typography>
<div >
<div>
<Button
disabled={activeStep === 0}
onClick={handleBack}
// className={classes.button}
>
Back
</Button>
<Button
variant="contained"
color="primary"
onClick={handleNext}
// className={classes.button}
>
{activeStep === steps.length - 1 ? 'Finish' : 'Next'}
</Button>
</div>
</div>
</StepContent>
</Step>
);
})}
</Stepper>
{activeStep === steps.length ? (
<React.Fragment>
{/* <Typography sx={{ mt: 2, mb: 1 }}>
All steps completed - you&apos;re finished
</Typography> */}
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
<Box sx={{ flex: '1 1 auto' }} />
<Button onClick={handleReset}>Reset</Button>
</Box>
</React.Fragment>
) : (
<React.Fragment>
<Typography sx={{ mt: 2, mb: 1 }}>Step {activeStep + 1}</Typography>
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
<Button
color="inherit"
disabled={activeStep === 0}
onClick={handleBack}
sx={{ mr: 1 }}
>
Back
</Button>
<Box sx={{ flex: '1 1 auto' }} />
{isStepOptional(activeStep) && (
<Button color="inherit" onClick={handleSkip} sx={{ mr: 1 }}>
Skip
</Button>
)}
<Button onClick={handleNext}>
{activeStep === steps.length - 1 ? 'Finish' : 'Next'}
</Button>
</Box>
</React.Fragment>
)}
</Box>
);
}
Thanks in advance!

Answer 1

you can use react-stepper also, See in CodeSandBox