Using State Data in MUI React Stepper

Viewed 71

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}
...
/>
0 Answers
Related