reactjstabsformik

Formik in tabs React


Want to use formik with tabs but have alot of forms ,one way is adding all my form inside the formik with the tabs but the code will not be very effiecient ,any example of tabs and components with formik to get all values any examples or liks will be appreciated


Solution

  • Just have to add values as props and handleChange , for everything to work and errors as useFormikContext()

    LOGINCOMPONENT

    const LoginDetails = props => {
        let captureForm = useFormikContext();
    
        return (
            <div>
                
                        <Box mt={2}>
                            <TextField
                                error={Boolean(
                                    captureForm.touched.loginCode && captureForm.errors.loginCode
                                )}
                                helperText={
                                    captureForm.touched.loginCode && captureForm.errors.loginCode
                                }
                                fullWidth
                                label="Login Code"
                                name="loginCode"
                                onChange={props.onChange}
                                value={props.values.loginCode}
                                variant="outlined"
                                onBlur={() => captureForm.setFieldTouched('loginCode', true)}
                            />
                        </Box>
                        <Box mt={2}>
                            <TextField
                                error={Boolean(
                                    captureForm.touched.password && captureForm.errors.password
                                )}
                                helperText={
                                    captureForm.touched.password && captureForm.errors.password
                                }
                                fullWidth
                                label="Password"
                                name="password"
                                type={'password'}
                                onChange={props.onChange}
                                value={props.values.password}
                                variant="outlined"
                                onBlur={() => captureForm.setFieldTouched('password', true)}
                            />
                        </Box>
    
            </div>
        );
    };
    
    export default LoginDetails;
    
    
    
    //FORMIK
    <Formik
                    innerRef={formRef}
                    enableReinitialize={true}
                    initialValues={{
                        
                        //Login
                        loginCode: currentEntityData.loginCode || '',
                        password: currentEntityData.password || '',
    
                    }}
                    validationSchema={Yup.object().shape({
                        
                        
                        //Login
                        [props.entityType === 3 ? 'loginCode' : '']:
                            Yup.string().required('LoginCode is required.') || '',
    
                        [props.entityType === 3 ? 'password' : '']:
                            Yup.string().required('Password is required.') || '',
    
                        
                        verified: Yup.bool(),
                    })}
                    onSubmit={async (
                        values,
                        { resetForm, setErrors, setStatus, setSubmitting }
                    ) => {
                        try {
                            //Call submitForm function then notification
                            submitForm(values).then(() => {
                                setMessageDisplay(true);
                                props.closeentityform();
                                props.refreshtable();
                            });
                        } catch (error) {
                            setStatus({ success: false });
                            setErrors({ submit: error.message });
                            setSubmitting(false);
                        }
                    }}
                >
                    {({
                        errors,
                        handleBlur,
                        handleChange,
                        handleSubmit,
                        isSubmitting,
                        setFieldTouched,
                        setFieldValue,
                        touched,
                        values,
                    }) => (
                        <form onSubmit={handleSubmit} {...props}>
                            <Card>
                                {/*Banking Dialogue */}
                                
                                <CardContent>
                                    {/*Forms based in tabs */}
                                    {/*Selective tabs based on type */}
                                    <Tabs
                                        value={value}
                                        onChange={handleTabChange}
                                        variant="scrollable"
                                        textColor="primary"
                                        scrollButtons="auto"
                                    >
                                        
                                    
                                        {props.entitytype === 3 ? <Tab label="Login Details" /> : ''}
                                        {/*Login*/}
                                    
    
                                    </Tabs>
    
                                    {value === 0 && (
                                        //Data
                                    )}
    
                                    
                                    {/*///////////////////////Login Details//////////////////////////// */}
                                    {props.entitytype === 1
                                        ? value === 3
                                        : value === 2 && (
                                                <>
                                                    <Box mt={2}>
                                                        <LoginDetails
                                                            values={values}
                                                            onChange={handleChange}
                                                        />
                                                    </Box>
                                                </>
                                          )}
    
                                    {/*///////////////////////Member Details//////////////////////////// */}
    
                                    {props.entitytype === 2
                                        ? value === 1 && (
                                                <>
                                                    <MemberShip values={values} onChange={handleChange} />
                                                </>
                                          )
                                        : props.entitytype === 1
                                        ? value === 2 && (
                                                <>
                                                    <MemberShip values={values} onChange={handleChange} />
                                                </>
                                          )
                                        : ''}
    
                                    {/*/////////////////////////////////Staff //////////////////////////////*/}
                                    {props.entitytype === 1
                                        ? value === 3
                                        : value === 3 && (
                                                <>
                                                    <Box mt={2}>
                                                        <Grid container spacing={3}>
                                                            <Grid item xs={4}>
                                                                <Typography>User</Typography>
                                                                <Checkbox
                                                                    name="userCheck"
                                                                    color="primary"
                                                                    checked={userCheck}
                                                                    onChange={() => isUserSelected()}
                                                                ></Checkbox>
                                                            </Grid>
                                                            <Grid item xs={4}>
                                                                <Typography>Financial User</Typography>
                                                                <Checkbox
                                                                    name="financialUserCheck"
                                                                    color="primary"
                                                                    checked={financialUserCheck}
                                                                    onChange={() => isFinancialUserSelected()}
                                                                ></Checkbox>
                                                            </Grid>
                                                            <Grid item xs={4}>
                                                                <Typography>Admin</Typography>
                                                                <Checkbox
                                                                    name="userCheck"
                                                                    color="primary"
                                                                    checked={adminCheck}
                                                                    onChange={() => isAdminSelected()}
                                                                ></Checkbox>
                                                            </Grid>
                                                        </Grid>
                                                        <Box mt={2}></Box>
                                                        <TextField
                                                            fullWidth
                                                            label="Staff Number"
                                                            name="staff.staffId"
                                                            onBlur={handleBlur}
                                                            onChange={handleChange}
                                                            value={values.staff.staffId}
                                                            variant="outlined"
                                                            error={Boolean(
                                                                getIn(touched, 'staff.staffId') &&
                                                                    getIn(errors, 'staff.staffId')
                                                            )}
                                                            helperText={
                                                                getIn(touched, 'staff.staffId') &&
                                                                getIn(errors, 'staff.staffId')
                                                            }
                                                        />
                                                    </Box>
                                                    <Box mt={2}>
                                                        <TextField
                                                            fullWidth
                                                            label="Join Date"
                                                            type={'date'}
                                                            name="staff.joinDate"
                                                            onBlur={handleBlur}
                                                            onChange={handleChange}
                                                            value={values.staff.joinDate}
                                                            variant="outlined"
                                                            error={Boolean(
                                                                getIn(touched, 'staff.joinDate') &&
                                                                    getIn(errors, 'staff.joinDate')
                                                            )}
                                                            helperText={
                                                                getIn(touched, 'staff.joinDate') &&
                                                                getIn(errors, 'staff.joinDate')
                                                            }
                                                        />
                                                    </Box>
                                                    <Box mt={2}>
                                                        <TextField
                                                            fullWidth
                                                            label="Leave Date"
                                                            type="date"
                                                            name="staff.leaveDate"
                                                            onBlur={handleBlur}
                                                            onChange={handleChange}
                                                            value={values.staff.leaveDate}
                                                            variant="outlined"
                                                            error={Boolean(
                                                                getIn(touched, 'staff.leaveDate') &&
                                                                    getIn(errors, 'staff.leaveDate')
                                                            )}
                                                            helperText={
                                                                getIn(touched, 'staff.leaveDate') &&
                                                                getIn(errors, 'staff.leaveDate')
                                                            }
                                                        />
                                                    </Box>
                                                </>
                                          )}
    
                                    
    
                                    <Box mt={3}>
                                        <Button
                                            variant="contained"
                                            color="secondary"
                                            type="submit"
                                            disabled={isSubmitting}
                                        >
                                            {props.id ? 'Save Changes' : 'Add User'}
                                        </Button>
                                        &nbsp;&nbsp;&nbsp;
                                        <Button
                                            onClick={props.closeentityform}
                                            variant="contained"
                                            color="secondary"
                                            disabled={isSubmitting}
                                        >
                                            Cancel
                                        </Button>
                                    </Box>
                                </CardContent>
                            </Card>
                        </form>
                    )}
                </Formik>