I'm using the material-ui stepper. I'm trying to pass text from state into the stepper as shown below. I get the error Objects are not valid as a React child.
Question: What is the correct way to pass data from state like this?
const [dataValue, setDataValue] = useState("Example Info");
const [dataValue2, setDataValue2] = useState("Example Info 2");
const [activeStep, setActiveStep] = React.useState(0);
const [activeData, setActiveData] = React.useState();
const maxSteps = steps.length;
const handleNext = () => {
setActiveStep((prevActiveStep) => prevActiveStep + 1);
};
const handleBack = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1);
};
let steps = [
{
label: "Example #1",
description: {dataValue}
},
{
label: 'Example #2',
description: {dataValue2}
},
];
...return(
<Box sx={{ height: 255, maxWidth: 400, width: '100%', p: 2 }}>
{steps[activeStep].description}
</Box>
<MobileStepper
variant="text"
steps={maxSteps}
position="static"
activeStep={activeStep}
stepTwoInputTwo ={stepTwoInputTwo}
...
/>