Formik QRcodeReader button submit for itself - reactjs

Question

I created a custom QRcode reader that added as button to formik customTextInout.tsx but when I click on it, it will submit with no value in it.
in this code I created a button that when you click on it, it will show the QrCodeReader.
QrReaderButton.tsx
import { useState } from "react";
import { QrReader } from "react-qr-reader";
import qrcode from "../assets/qr-code.png";
interface Props {
setQrData: any;
}
const QrReaderButton: React.FC<Props> = (props) => {
const [data, setData] = useState<any>();
const [show, setShow] = useState<boolean>(false);
let a;
return (
<div className="flex flex-col w-max items-center">
<button
type="button"
onClick={() => (!show ? setShow(true) : setShow(false))}
>
<img src={qrcode} alt="qr-code" width={40} />
</button>
{show && (
<div className="w-96">
<QrReader
onResult={(result: any, error) => {
if (!!result) {
setData(JSON.parse(result?.text));
props.setQrData(JSON.parse(result?.text));
}
if (!!error) {
// console.info(error);
}
}}
constraints={{ facingMode: "user" }}
/>
<p> {data ? JSON.stringify(data) : "No result"}</p>
</div>
)}
</div>
);
};
export default QrReaderButton;
in this code I created a custom input for formik with help of formik official docs
CustomTextInput.tsx
import {
FormControl,
FormHelperText,
FormLabel,
Input,
} from "#chakra-ui/react";
import QrReaderButton from "../QrReaderButton";
const CustomTextInput = ({
field,
form: { touched, errors },
...props
}: any) => {
return (
<FormControl isInvalid={errors.name && touched.name}>
<FormLabel>{props.label}</FormLabel>
<div className="flex gap-2">
<Input {...field} {...props} />
<div className="w-max">
<QrReaderButton
setQrData={() => {
console.log("test");
}}
/>
</div>
</div>
<FormHelperText>this is helper</FormHelperText>
</FormControl>
);
};
export default CustomTextInput;
in this code I used CustomTextInout component with chakra-ui modal.
FormModal.tsx
import {
useDisclosure,
Button,
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalCloseButton,
ModalBody,
FormLabel,
useToast,
ModalFooter,
} from "#chakra-ui/react";
import { Formik, Form, Field } from "formik";
import { useNavigate } from "react-router-dom";
import CustomNumberInput from "./CustomInputs/CustomNumberInput";
import CustomOptionInput from "./CustomInputs/CustomOptionInput";
import CustomTextInput from "./CustomInputs/CustomTextInput";
import TokenButton from "./TokenButton";
interface Props {
key: string;
Title: string;
buttonValue?: string;
image: string;
nav: string;
initialValues: any;
isLoading: boolean;
apiHook: any;
validateName: any;
}
const FormModal: React.FC<Props> = (props) => {
const { isOpen, onOpen, onClose } = useDisclosure();
const navigate = useNavigate();
const toast = useToast();
return (
<div className="w-full content-center ">
<TokenButton
nav={props.nav}
image={props.image}
title={props.Title}
onClick={onOpen}
/>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>{props.Title}</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Formik
initialValues={props.initialValues}
onSubmit={(values, actions) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
actions.setSubmitting(false);
}, 1000);
props
.apiHook(values)
.unwrap()
.catch((e: any) => {
// alert(JSON.stringify(e, null, 2))
toast({
status: "error",
title: "Error",
description: JSON.stringify(e, null, 2),
isClosable: true,
});
if (e.status == 401) {
setTimeout(() => {
navigate("/login");
}, 1000);
localStorage.clear();
}
});
}}
>
{(propsForm) => (
<Form
onSubmit={propsForm.handleSubmit}
onReset={propsForm.handleReset}
className="w-full h-full bg-[#ced8d7ac] shadow-2xl rounded-2xl p-4 items-center content-center text-current"
>
<FormLabel>{props.Title}</FormLabel>
<div className="grid lg:grid-cols-1 md:grid-cols-2 gap-4">
{Object.keys(props.initialValues).map((key) => {
return (
<Field
id={key}
key={key}
name={key}
label={key}
backgroundColor="#ffffffe1"
component={CustomTextInput}
/>
);
})}
</div>
<Button
type="submit"
isLoading={props.isLoading}
className="gre mt-2"
>
{props.Title}
</Button>
</Form>
)}
</Formik>
</ModalBody>
<ModalFooter>
<Button colorScheme="blue" mr={3} onClick={onClose}>
Close
</Button>
<Button variant="ghost">{props.buttonValue}</Button>
</ModalFooter>
</ModalContent>
</Modal>
</div>
);
};
export default FormModal;

Answer 1

Default behavior of button in form is submit. so you need to make sure that you specified a type except the submit.
See reference in here
Your code will be like below
QrReaderButton
import { useState } from "react";
import { QrReader } from "react-qr-reader";
import qrcode from "../assets/qr-code.png";
interface Props {
setQrData: any;
}
const QrReaderButton: React.FC<Props> = (props) => {
const [data, setData] = useState<any>();
const [show, setShow] = useState<boolean>(false);
let a;
return (
<div className="flex flex-col w-max items-center">
<button
type="button" //make sure you add this
onClick={() => (!show ? setShow(true) : setShow(false))}
>
<img src={qrcode} alt="qr-code" width={40} />
</button>
{show && (
<div className="w-96">
<QrReader
onResult={(result: any, error) => {
if (!!result) {
setData(JSON.parse(result?.text));
props.setQrData(JSON.parse(result?.text));
}
if (!!error) {
// console.info(error);
}
}}
constraints={{ facingMode: "user" }}
/>
<p> {data ? JSON.stringify(data) : "No result"}</p>
</div>
)}
</div>
);
};
export default QrReaderButton;