step one validation and submit

src/Components/Modal/PasswordModal.jsx

 
 import { StepOne } from '../Password/Steps/one'
 
-const steps = [
-    {
-        label : 'Información del candidato',
-        operation: <StepOne/>
-    },
-    {
-        label : 'Seleccionar plaza',
-        operation: <h1>plaza</h1>
-    },
-    {
-        label : 'Seleccionar pruebas',
-        operation: <h1>preubas</h1>
-    },
-    {
-        label : 'Confirmar',
-        operation: <h1>adios</h1>
-    },
-];
 
 export function HelpModal (props) {
 
     };
 
 
+    const steps = [
+        {
+            label : 'Información del candidato',
+            operation: 
+                <StepOne 
+                    handleNext={handleNext} 
+                    handleBack={handleBack} 
+                />
+        },
+        {
+            label : 'Seleccionar plaza',
+            operation: <h1>plaza</h1>
+        },
+        {
+            label : 'Seleccionar pruebas',
+            operation: <h1>preubas</h1>
+        },
+        {
+            label : 'Confirmar',
+            operation: <h1>adios</h1>
+        },
+    ];
+
+
     return (
         <Modal size="lg" 
             aria-labelledby="contained-modal-title-vcenter" 
                                     {steps[activeStep].operation}
                                 </Box>
 
-                                <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
-                                    <Button
-                                        color="inherit"
-                                        disabled={activeStep === 0}
-                                        onClick={handleBack}
-                                        sx={{ mr: 1 }}
-                                    >
-                                        Anterior
-                                    </Button>
-                                    <Box sx={{ flex: '1 1 auto' }} />
-                                    <Button onClick={handleNext}>
-                                        {activeStep === steps.length - 1 ? 'Guardar' : 'Siguiente'}
-                                    </Button>
-                                </Box>
-
                             </React.Fragment>
                         )}
                 </Box>

src/Components/Password/Rows.js

         label: 'Operacion',
     },
 ]
+export const niveles_educativos = [
+    "Primaria",
+    "Basico",
+    "Diversificado",
+    "Tecnico",
+    "Pregrado / Licenciatura",
+    "Postgrado / Maestria",
+    "Doctorado",
+    "Diplomado",
+    "Certificacion",
+    "Cursos"
+]

src/Components/Password/Steps/one.js

 import * as Yup from 'yup';
 import { useState } from 'react';
 import { useFormik, Form, FormikProvider } from 'formik';
-import { Icon } from '@iconify/react';
 
 import {  
     Box, Button,
-    Stack, TextField, IconButton, InputAdornment, 
+    Stack, TextField, 
+    InputLabel,MenuItem,FormControl,Select
 } from '@mui/material';
 
-import eyeFill from '@iconify/icons-eva/eye-fill';
+import { niveles_educativos } from '../Rows'
-import eyeOffFill from '@iconify/icons-eva/eye-off-fill';
-// import { V1, V2 } from '../../Utils/HTTP'
 
 export function StepOne(props) {
 
-    const steplen = 2;
+    const [educativo, setEducativo] = useState('');
-    const index = 0;
 
-    const [showPassword, setShowPassword] = useState(false);
+    const changeNivelEducativo = (event) => {
-    const [showPasswordTwo, setShowPasswordTwo] = useState(false);
+        setEducativo(event.target.value);
+    };
 
-    const RegisterSchema = Yup.object().shape({
+    const CandidatoSchema = Yup.object().shape({
-        firstName: Yup.string().min(2, 'Demasiado corto!').max(50, 'Demasiado largo!').required('Tu nombre es requerido'),
+        firstName: Yup.string().min(2, 'Demasiado corto!').max(50, 'Demasiado largo!').required('El nombre es requerido'),
         lastName: Yup.string().min(2, 'Demasiado corto!').max(50, 'Demasiado Largo!').required('El apellido es requerido'),
-        email: Yup.string().email('El correo no es valido').required('Email es requerido'),
+        puesto: Yup.string().required('El puesto es requerido'),
-        password: Yup.string().min(5, 'La contraseña debe contener mínimo 5 caracteres').required('la contraseña es requerida'),
+        niveles_educativo: Yup.number().required('Selecciona un nivel educativo')
-        password_confirm: Yup.string().required('Las contraseñas no coincidien').oneOf([Yup.ref('password'), null], 'Las contraseñas no coincidien')
     });
 
     let {  handleNext, handleBack } = props
         initialValues: {
             firstName: '',
             lastName: '',
-            email: '',
+            puesto: '',
-            password: '',
+            niveles_educativo: 0,
-            password_confirm: ''
         },
         onSubmit: (fields) => {
+            console.log('SUBMIT > ',fields)
             handleNext()
         },
-        validationSchema: RegisterSchema,
+        validationSchema: CandidatoSchema,
     });
 
     const {errors, touched, handleSubmit, getFieldProps } = formik;
                             {...getFieldProps('firstName')}
                             error={Boolean(touched.firstName && errors.firstName)}
                             helperText={touched.firstName && errors.firstName}
-                        />
+                            />
 
                         <TextField
                             label="Apellidos"
                             {...getFieldProps('lastName')}
                             error={Boolean(touched.lastName && errors.lastName)}
                             helperText={touched.lastName && errors.lastName}
-                        />
+                            />
                     </Stack>
 
                     <TextField
                         fullWidth
-                        autoComplete="username"
+                        type="text"
-                        type="email"
+                        label="Experiencia laboral o puesto"
-                        label="Correo Electrónico"
+                        {...getFieldProps('puesto')}
-                        {...getFieldProps('email')}
+                        error={Boolean(touched.puesto && errors.puesto)}
-                        error={Boolean(touched.email && errors.email)}
+                        helperText={touched.puesto && errors.puesto}
-                        helperText={touched.email && errors.email}
+                        />
-                    />
-
-                    <TextField
-                        fullWidth
-                        autoComplete="current-password"
-                        type={showPassword ? 'text' : 'password'}
-                        label="Contraseña"
-                        {...getFieldProps('password')}
-                        InputProps={{
-                            endAdornment: (
-                                <InputAdornment position="end">
-                                    <IconButton edge="end" onClick={() => setShowPassword((prev) => !prev)}>
-                                        <Icon icon={showPassword ? eyeFill : eyeOffFill} />
-                                    </IconButton>
-                                </InputAdornment>
-                            )
-                        }}
-                        error={Boolean(touched.password && errors.password)}
-                        helperText={touched.password && errors.password}
-                    />
 
-                    <TextField
+                    <FormControl fullWidth>
-                        fullWidth
+                        <InputLabel id="demo-simple-select-label">Nivel Educativo</InputLabel>
-                        type={showPasswordTwo ? 'text' : 'password'}
+                        <Select
-                        label="Confirma contraseña"
+                            labelId="demo-simple-select-label"
-                        {...getFieldProps('password_confirm')}
+                            id="demo-simple-select"
-                        InputProps={{
+                            value={educativo}
-                            endAdornment: (
+                            label="Nivel Educativo"
-                                <InputAdornment position="end">
+                            onChange={changeNivelEducativo}
-                                    <IconButton edge="end" onClick={() => setShowPasswordTwo((prev) => !prev)}>
+                            {...getFieldProps('niveles_educativo')}
-                                        <Icon icon={showPasswordTwo ? eyeFill : eyeOffFill} />
+                            error={Boolean(touched.niveles_educativo && errors.niveles_educativo)}
-                                    </IconButton>
+                        >
-                                </InputAdornment>
+                            {
-                            )
+                                niveles_educativos.map( ( nivel, index ) => {
-                        }}
+                                return (
-                        error={Boolean(touched.password_confirm && errors.password_confirm)}
+                                    <MenuItem key={nivel} value={index}>{nivel}</MenuItem>
-                        helperText={touched.password_confirm && errors.password_confirm}
+                                )
-                    />
+                            })
-
+                        }
-
+                        </Select>
-                  <Box sx={{ mb: 2 }}>
+                    </FormControl>
-                    <div style={{ paddingTop  : 15}}>
+
-                      <Button
+
-                        type="submit"
+                    <Box sx={{ mb: 2 }}>
-                        className="registerBtn" 
+                        <div style={{ paddingTop  : 15}}>
-                        variant="contained"
+                            <Button
-                        sx={{ mt: 1, mr: 1 }}
+                                type="submit"
-                      >
+                                className="registerBtn" 
-                        {index === steplen - 1 ? 'Registrarme' : 'Siguiente'}
+                                variant="contained"
-                      </Button>
+                                sx={{ mt: 1, mr: 1 }}
-                      <Button
+                            >
-                        disabled={true}
+                                {'Siguiente'}
-                        onClick={handleBack}
+                            </Button>
-                        sx={{ mt: 1, mr: 1 }}
+                            <Button
-                      >
+                                disabled={true}
-                        Regresar
+                                onClick={handleBack}
-                      </Button>
+                                sx={{ mt: 1, mr: 1 }}
-                    </div>
+                            >
-                  </Box>
+                                Regresar
+                            </Button>
+                        </div>
+                    </Box>
 
                 </Stack>
             </Form>