new method with checkbox

src/Components/Modal/PasswordModal.jsx

@@ -8,7 +8,7 @@ import {
 
 import { StepOne } from '../Password/Steps/one'
 import { StepTwo } from '../Password/Steps/two'
-
+import { StepTree } from '../Password/Steps/tree'
 
 export function HelpModal (props) {
 
@@ -60,7 +60,11 @@ export function HelpModal (props) {
         },
         {
             label : 'Seleccionar pruebas',
-            operation: <h1>preubas</h1>
+            operation:
+                <StepTree
+                    handleNext={handleNext} 
+                    handleBack={handleBack} 
+                />
         },
         {
             label : 'Confirmar',

src/Components/Password/Steps/tree.js

@@ -0,0 +1,29 @@
+import {
+    Box, Button, Stack,
+    TextField, Autocomplete
+} from '@mui/material';
+
+export function StepTree(props) {
+    return(
+        <Box sx={{ mb: 2 }}>
+            <div style={{ paddingTop  : 15}}>
+                <Button
+                    type="submit"
+                    className="registerBtn" 
+                    variant="contained"
+                    sx={{ mt: 1, mr: 1 }}
+                >
+                    {'Siguiente'}
+                </Button>
+                <Button
+                    disabled={false}
+                    onClick={props.handleBack}
+                    sx={{ mt: 1, mr: 1 }}
+                >
+                    Regresar
+                </Button>
+            </div>
+        </Box>
+
+    )
+}

src/Components/Password/Steps/two.js

@@ -4,10 +4,18 @@ import * as Yup from 'yup';
 import { useFormik, Form, FormikProvider } from 'formik';
 
 import {
-    Box, Button, Stack,
-    TextField, Autocomplete
+    Box, Button, Stack, Checkbox,
+    TextField, Autocomplete,
 } from '@mui/material';
 
+import {
+    CheckBox as CheckBoxIcon,
+    CheckBoxOutlineBlank as CheckBoxOutlineBlankIcon
+} from '@mui/icons-material';
+
+const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
+const checkedIcon = <CheckBoxIcon fontSize="small" />;
+
 export function StepTwo(props) {
 
     const PlazaScheme = Yup.object().shape({
@@ -15,12 +23,10 @@ export function StepTwo(props) {
     });
 
     let {  handleNext, handleBack } = props
-    const [value, setValue] = React.useState(top100Films[0]);
-    const [inputValue, setInputValue] = React.useState('');
 
     const formik = useFormik({
         initialValues: {
-            puesto: {},
+            puesto: {}
         },
         onSubmit: (fields) => {
             console.log('SUBMIT > ',fields)
@@ -29,7 +35,7 @@ export function StepTwo(props) {
         validationSchema: PlazaScheme,
     });
 
-    const {errors, touched, handleSubmit, getFieldProps } = formik;
+    const {errors, touched, handleSubmit, getFieldProps, setValues } = formik;
 
     return (
         <FormikProvider style={{ padding : 25 }} value={formik}>
@@ -38,36 +44,36 @@ export function StepTwo(props) {
 
                     <Autocomplete
                         multiple
-                        autoSelect={true}
-                        id="tags-standard"
+                        id="checkboxes-tags-demo"
                         options={top100Films}
+                        disableCloseOnSelect
                         getOptionLabel={(option) => option.label}
-                        onChange={(event, newValue) => {
-                            console.log('NEW VAL', newValue[0])
-                            setValue(newValue[0]);
+                        onChange={(a,b,c) => {
+                            setValues({
+                                puesto : b[0]
+                            })
                         }}
-                        inputValue={inputValue}
-                        onInputChange={(event, newInputValue) => {
-                            console.log('NEW', newInputValue)
-                            setInputValue(newInputValue);
-                        }}
-
-
+                        renderOption={(props, option, { selected }) => (
+                            <li {...props}>
+                                <Checkbox
+                                    icon={icon}
+                                    checkedIcon={checkedIcon}
+                                    // style={{ marginRight: 8 }}
+                                    checked={selected}
+                                    />
+                                {option.label}
+                            </li>
+                        )}
                         renderInput={(params) => (
-                            <TextField
+                            <TextField 
                                 {...getFieldProps('puesto')}
-                                {...params}
                                 error={Boolean(touched.puesto && errors.puesto)}
                                 helperText={touched.puesto && errors.puesto}
-                                variant="standard"
-                                label="Buscar Plaza" 
-                                placeholder="Favorites"
-                                fullWidth
-
+                                {...params} 
+                                label="Checkboxes" placeholder="Favorites" 
                                 />
                         )}
-                        />
-
+                    />
 
                     <Box sx={{ mb: 2 }}>
                         <div style={{ paddingTop  : 15}}>