Передача formik в родительский компонент

Question

Есть такой код:

import { useFormik } from 'formik';
import { useDispatch } from 'react-redux';
import SubmitButton from '../SubmitButton/SubmitButton';

const CustomForm = ({
    children,
    initialValues,
    validationSchema,
    operation,
}) => {
    const dispatch = useDispatch();

    const onSubmit = async values => {
        dispatch(operation(values));
    };

    const formik = useFormik({
        initialValues,
        onSubmit,
        validationSchema,
    });

    return (
        <form onSubmit={formik.handleSubmit}>
            {children}

            <SubmitButton buttonText="Register Now" />
        </form>
    );
};

export default CustomForm;

Как мне достукаться до formik в родительском компоненте?

<CustomForm
    initialValues={initialValues}
    validationSchema={validationSchema}
    operation={signup}
>
     <CustomInput
        name="username"
        type="text"
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
        value={formik.values.username}
        placeholder="Enter your name"
     />
</CustomForm>

Answer 1

Вопрос решил. Проблема была в CustomForm. Надо было сделать так:

{children(formik)}

А в родительском компоненте:

{formik => (
                        <div>
                            <div>
                                <CustomInput
                                    name="username"
                                    type="text"
                                    onChange={formik.handleChange}
                                    onBlur={formik.handleBlur}
                                    value={formik.values.username}
                                    placeholder="Enter your name"
                                />
                                {formik.errors.username &&
                                    formik.touched.username && (
                                        <div>{formik.errors.username}</div>
                                    )}
                            </div>

                            </div> )}

БЛОГ НА HUSL

Передача formik в родительский компонент

Ответы (1 шт):