CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Miquéias Fernandes
Miquéias Fernandes

Reputation: 35

Show correctly Stepper with Material UI and React.js

I trying shown a responsible screen with "progressive form's" with React.js and Material Ui. I'm using the Stepper component for this, but this dont working, when i press "Next Button", the button have be hide, but not showning the next step content with "Teste" text. My component code:

import React, { useState } from 'react';
import {
    Grid,
    TextField,
    Stepper,
    Step,
    StepLabel,
    AppBar,
    Toolbar,
    IconButton,
    Typography,
    Button
} from '@material-ui/core';

import BackIcon from '@material-ui/icons/ArrowBack';
import NextButton from './common/NextButton';

import { useStyles } from './styles';

const NewFarm = (props) => {
    const [currentStep, setCurrentStep] = useState(1);
    const classes = useStyles(props);
    const handleNext = () => {
        setCurrentStep(currentStep + 1);
    }
    return (
        <>
            <AppBar className={classes.bar}>
                <Toolbar>
                    <IconButton>
                        <BackIcon style={{ color: "white" }} />
                    </IconButton>
                    <Typography>Cadastro da Fazenda</Typography>
                </Toolbar>
            </AppBar>
                <Stepper style={{height: "100vh"}} activeStep={currentStep}>
                    <Step className={classes.step} key={1}>
                        <Typography id="farmName" className={classes.stepLabel}>Preencha o <br/>nome da fazenda</Typography>
                        <TextField size="medium" fullWidth={true} placeholder="Insira o nome aqui"/>
                        <NextButton onClick={handleNext}/>
                    </Step>
                    <Step key={2}>
                        Teste
                    </Step>
                </Stepper>
        </>
    )
};

export default NewFarm;

Someone could help me?

Upvotes: 2

Views: 1385

Answers (1)

Eric
Eric

Reputation: 1347

It sounds like you have to put the step content into instead of pure text. try the following,

<Step key={1}>  
  <StepContent>                      
    <Typography id="farmName" className={classes.stepLabel}>Preencha o <br/>nome da fazenda</Typography>
  </StepContent>
</Step>
<Step key={2}>
  <StepContent>   
    <Typography id="farmName" className={classes.stepLabel}>Preencha o <br/>nome da fazenda333</Typography>
  </StepContent>   
</Step>

Upvotes: 2

Related Questions