This is my formik code, it seems this is where the error is coming from....
import * as React from 'react';
import { FormikConfig, FormikErrors, FormikState, FormikTouched, FormikValues, FieldMetaProps, FieldHelperProps, FieldInputProps } from './types';
export declare function useFormik<Values extends FormikValues = FormikValues>({ validateOnChange, validateOnBlur, validateOnMount, isInitialValid, enableReinitialize, onSubmit, ...rest }: FormikConfig<Values>): {
initialValues: Values;
initialErrors: FormikErrors<unknown>;
initialTouched: FormikTouched<unknown>;
initialStatus: any;
handleBlur: {
(e: React.FocusEvent<any>): void;
<T = any>(fieldOrEvent: T): T extends string ? (e: any) => void : void;
};
handleChange: {
(e: React.ChangeEvent<any>): void;
<T_1 = string | React.ChangeEvent<any>>(field: T_1): T_1 extends React.ChangeEvent<any> ? void : (e: string | React.ChangeEvent<any>) => void;
};
handleReset: (e: any) => void;
handleSubmit: (e?: React.FormEvent<HTMLFormElement> | undefined) => void;
resetForm: (nextState?: Partial<FormikState<Values>> | undefined) => void;
setErrors: (errors: FormikErrors<Values>) => void;
setFormikState: (stateOrCb: FormikState<Values> | ((state: FormikState<Values>) => FormikState<Values>)) => void;
setFieldTouched: (field: string, touched?: boolean, shouldValidate?: boolean | undefined) => Promise<FormikErrors<Values>> | Promise<void>;
setFieldValue: (field: string, value: any, shouldValidate?: boolean | undefined) => Promise<FormikErrors<Values>> | Promise<void>;
setFieldError: (field: string, value: string | undefined) => void;
setStatus: (status: any) => void;
setSubmitting: (isSubmitting: boolean) => void;
setTouched: (touched: FormikTouched<Values>, shouldValidate?: boolean | undefined) => Promise<FormikErrors<Values>> | Promise<void>;
setValues: (values: React.SetStateAction<Values>, shouldValidate?: boolean | undefined) => Promise<FormikErrors<Values>> | Promise<void>;
submitForm: () => Promise<any>;
validateForm: (values?: Values) => Promise<FormikErrors<Values>>;
validateField: (name: string) => Promise<void> | Promise<string | undefined>;
isValid: boolean;
dirty: boolean;
unregisterField: (name: string) => void;
registerField: (name: string, { validate }: any) => void;
getFieldProps: (nameOrOptions: any) => FieldInputProps<any>;
getFieldMeta: (name: string) => FieldMetaProps<any>;
getFieldHelpers: (name: string) => FieldHelperProps<any>;
validateOnBlur: boolean;
validateOnChange: boolean;
validateOnMount: boolean;
values: Values;
errors: FormikErrors<Values>;
touched: FormikTouched<Values>;
isSubmitting: boolean;
isValidating: boolean;
status?: any;
submitCount: number;
};
export declare function Formik<Values extends FormikValues = FormikValues, ExtraProps = {}>(props: FormikConfig<Values> & ExtraProps): JSX.Element;
/**
* Transform Yup ValidationError to a more usable object
*/
export declare function yupToFormErrors<Values>(yupError: any): FormikErrors<Values>;
/**
* Validate a yup schema.
*/
export declare function validateYupSchema<T extends FormikValues>(values: T, schema: any, sync?: boolean, context?: any): Promise<Partial<T>>;
/**
* Recursively prepare values.
*/
export declare function prepareDataForValidation<T extends FormikValues>(values: T): FormikValues;This is my nodejs code....
const {
models: { Withdraw, User },
sequelize,
} = require("../service/db/sequelize");
const makeWithdraw = async (req, res, next) => {
const { account, name, amount, paymentmethod } = req.body;
const { id } = req.payload.dataValues;
try {
const withdraw = await Withdraw.create({
account: account,
amount: amount,
userId: id,
});
if (!withdraw)
throw createHttpError.InternalServerError("Unable To Create Deposit");
res.send({
status: 200,
withdraw: withdraw,
});
} catch (error) {
next(error);
}
};
const getWithdraws = async (req, res, next) => {
try {
const usersData = []
const withdraw = await Withdraw.findAll();
if (!withdraw) throw createHttpError.InternalServerError();
withdraw.map(user => {
const userDetail = {
...user.dataValues,
createdAt: new Date(user.createdAt).toDateString()
}
usersData.push(userDetail)
})
res.send({
status: 200,
withdraw: usersData,
});
} catch (error) {
next(error);
}
};
const getUserWithdraws = async (req, res, next) => {
const { id } = req.payload.dataValues;
const usersData = []
try {
const user = await User.findByPk(id, { include: ["withdraws"] });
if (!user) throw createHttpError.InternalServerError();
const { withdraws } = user;
const lastWithdraw = Number(withdraws[withdraws.length - 1].amount);
const allWithdraws = [];
let totalWithdraws = 0;
await withdraws.map((withdraw) => {
allWithdraws.push(Number(withdraw.amount));
const userDetail = {
...withdraw.dataValues,
createdAt: new Date(user.createdAt).toDateString()
}
usersData.push(userDetail)
});
totalWithdraws = allWithdraws.reduce((a, b) => a + b, 0)
res.send({
status: 200,
userWithdraws:usersData,
withdraws: allWithdraws,
lastWithdraw:lastWithdraw,
totalWithdraws:totalWithdraws
});
} catch (error) {
next(error);
}
};
const approveWithDraw = async(req, res, next) => {
console.log(req.body);
const {id} = req.body;
const withdraw = await Withdraw.update(
{
status:"Successful"
},
{
where:{
id:id
}
}
);
}
module.exports = { makeWithdraw, getWithdraws, getUserWithdraws, approveWithDraw };
Good day stacoverflow. I am a newbiee to react and nodejs and i am trying to create multiple individual forms in a page that will act independently and pass data when filled. Everything seems to be working fine but when i try filling a form it just goes blank, i wonder what the issue is, i have tried my best but to no avail
import React, { useEffect } from "react";
import SpringModal from "../../components/Modal/Modal";
import { StyledWithdraw } from "./StyledWithdraw";
import Inputs from "../../components/inputs/Inputs";
import { Form, Formik } from "formik";
import Button from "../../components/Button/Button";
import { useLocation, useNavigate } from "react-router-dom";
import axios from "axios";
const initialValues = {
paymentmethod: "",
account: "",
amount: "",
};
const Witdraw = () => {
const token = localStorage.getItem("user");
const onSubmit = async (values) => {
console.log(values);
try {
axios
.post(
"http://localhost:8660/v1/auth/add/withdraw",
{
...values,
},
{
headers: {
authorization: `${token}`,
},
}
)
.then((response) => {
if (response.status === 200) {
console.log(response);
}
})
.catch((err) => {
console.log(err);
});
} catch (error) {}
};
return (
<div className=" container grid grid-cols-2 py-12 gap-6">
<SpringModal imageUrl={card} details="Transfers">
<div className="flex justify-center">
<img src={card} alt="" className="pay_logo w-20 h-20 " />
</div>
<Formik>
<Form>
<div className="mt-4">
<div className="">
<Inputs
label={"Full Name"}
type={"text"}
name={"name"}
id={"name"}
/>
</div>
</div>
<div className="mt-4">
<div className="">
<Inputs
label={"Account Number"}
type={"number"}
name={"account"}
id={"account"}
/>
</div>
</div>
<div className="mt-4">
<div className="">
<Inputs
label={"Bank Name"}
type={"text"}
name={"bank"}
id={"bank"}
/>
</div>
<div className="">
<Inputs
label={"Amount"}
type={"number"}
name={"amount"}
id={"amount"}
/>
</div>
</div>
<div className="mt-4">
<Button
outline={false}
text={"Proceed"}
styles={"text-center"}
/>
</div>
</Form>
</Formik>
</SpringModal>
</div>
</StyledWithdraw>
);
};
export default Witdraw;