How to set the formik field value with the useState hook?

Question

I have a simple form which has only two fields,name and wallet_address, I want the user's to type wallet_address or simply scan the address, once the scan is successful the address will be stored in the state variable, I want to update the wallet_address field with the new state value. Currently this is not working, only manually typing the address is working but not the scanning feature.

import { ErrorMessage, Field, Form, Formik } from "formik";
import ScanQrPopUp from "../components/wallet/popup/ScanQrPopup";


  const [walletAddress, setWalletAddress] = useState<any>("");

  const handleScanAddress = (wallet: string) => {
    console.log("wallet address---", wallet);
    setWalletAddress(wallet);
  };

  const validationSchema = Yup.object().shape({
    name: Yup.string()
      .min(3, "Name should be atleast 3 characters")
      .required("Name is required"),
    wallet_address: Yup.string()
      .required("Wallet Address is required")
  });


          <Formik
            initialValues={{
              name: "",
              wallet_address: "",
            }}
            onSubmit={async (values, { resetForm }) => {
              setIsLoading(true);
              console.log(values.name);
              console.log(values.wallet_address);
              setIsLoading(false);
              resetForm();
            }}
            validationSchema={validationSchema}
            validateOnChange
          >
            {({ values, resetForm }) => (
              <Form>
                <div className="w-[80%]">
                  <label
                    className="text-left"
                    htmlFor="input"
                  >
                    Name
                  </label>
                  <Field
                    name="name"
                    type="text"
                    spellCheck={false}
                    className="block"
                    placeholder="Enter the Name"
                  />
                  <p className="text-red-600">
                    <ErrorMessage name="name" />
                  </p>
                </div>

                <div className="w-[80%] mt-4">
                  <label
                    className="text-left"
                    htmlFor="wallet_address"
                  >
                    wallet address
                  </label>
                  <Field
                    name="wallet_address"
                    type="text"
                    spellCheck={false}
                    className="block "
                    placeholder="Enter wallet address"
                  />
                  <p className="text-red-600 ">
                    <ErrorMessage name="wallet_address" />
                  </p>
                </div>
              </Form>
            )}
          </Formik>

    <ScanQrPopUp
      handlePopUp={handleQrPopup}
      walletAddress={handleScanAddress}
    />

The state of wallet address is updated by ScanQr component. @Usama — Mohanraj G, Jul 19 '22 at 09:27

code46 · Answer 1 · 2023-03-13T23:31:04.410

This is how I use formik. Try it out

import { string, object, array } from "yup";
import { useFormik } from "formik";
const AddBrand = () => {
  const [supplier, setsupplier] = React.useState({
    name: "",
    phone: "",
    email: "",
    address: "",
  });
  let brandSchema = object({
    name: string().required(),
    manufacturer: string().required(),
    madeIn: string().required(),
    category: string().required(),
    supllier: array(),
  });
  const formik = useFormik({
    initialValues: {
      name: "",
      manufacturer: "",
      madeIn: "",
      category: "",
      supplier: [],
    },
    validationSchema: brandSchema,
    onSubmit: (values) => {
      formik.values.supplier = supplier;
      alert(JSON.stringify(values))
    },
  });
  function handleChange(event) {
    const { name, value } = event.target;
    setsupplier({ ...supplier, [name]: value });
  }
  return (
    <div>
          <div className="mt-3">
            <h6>Supplier Information</h6>
            <input
              className="form-control form-control-sm w-50"
              type="text"
              placeholder="Company Name"
              aria-label=".form-control-sm example"
              name="name"
              onChange={(e) => handleChange(e)}
              value={supplier["name"]}
            />
            <input
              className="form-control form-control-sm w-50 mt-1"
              type="tel"
              placeholder="Mobile Number"
              aria-label=".form-control-sm example"
              name="phone"
              onChange={(e) => handleChange(e)}
              value={supplier["phone"]}
            />
            <input
              className="form-control form-control-sm w-50 mt-1"
              type="email"
              placeholder="Email"
              aria-label=".form-control-sm example"
              name="email"
              onChange={(e) => handleChange(e)}
              value={supplier["email"]}
            />
            <input
              className="form-control form-control-sm w-50 mt-1"
              type="text"
              placeholder="Address"
              aria-label=".form-control-sm example"
              name="address"
              onChange={(e) => handleChange(e)}
              value={supplier["address"]}
            />
          </div>
          <button
            type="submit"
            className="btn btn-success border-0 rounded-3 mt-5"
          >
            Add Brand
          </button>
    </div>
  );
};

export default AddBrand;

How to set the formik field value with the useState hook?

1 Answers1