'Formik with redux and material ui
i'm new using formik and redux, i tring creating a validation with yup using formik and redux, but a i can't make this work correctly before i implement formik redux logic he working correctly but my question is what i can implement inside formik a redux logic, above is my code:
export const Login = () => {
const dispatch = useDispatch();
const [value, setValue] = useState({ password: "", email: "" });
const handleChange = (event) => {
setValue({ ...value, [event.target.name]: event.target.value })
};
const handleSubmit = async (e) => {
e.preventDefault();
if (!value.email || !value.password) {
return alert("Email and password are required");
}
dispatch(loginPending());
try {
const res = await login(value);
dispatch(loginSuccess(res));
dispatch(getUserSuccess(res));
} catch (err) {
dispatch(loginFailure(err));
}
};
const formik = useFormik({
initialValues: {
email: "",
password: "",
},
validationSchema: validationSchema,
});
return (
<form onSubmit={formik.handleSubmit}>
<WrapperInput>
<Label>E-Mail</Label>
<FormattedMessage
id="placeholder_email"
defaultMessage="Enter your e-mail"
>
{(placeholder) => (
<Input
color="primary_orange"
placeholder={placeholder[0]}
name="email"
value={formik.values.email}
onChange={formik.handleChange}
type="email"
variant="outlined"
validators={["required", "isEmail"]}
errorMessages={["this field is required", "email is not valid"]}
error={formik.touched.email && Boolean(formik.errors.email)}
helperText={formik.touched.email && formik.errors.email}
/>
)}
</FormattedMessage>
</WrapperInput>
<WrapperButton>
<PrimaryButton type="submit" variant="contained">
Log In
</PrimaryButton>
</form>
)
}
i try send a value to login but formik have a values, i don`t know how i can make formik understand my value and not a values, if i can try send formik.value.email value is don't recognized for formik.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
