Questions tagged [formik]

After the initial props are updated, it is important to also update the values in the forms accordingly. export default withFormik({ mapPropsToValues: (props: Props) => { return ( { id: props.initialData.id, ...

Within my React functional component, I utilize Formik for form management and MaterialUI V5.10 for styling. The form includes TextField elements and a Canvas element. I am encountering two issues... Despite setting initial values in Formik, the TextFiel ...

My objective is to automatically select a value in an option select when the onChange event occurs, and then use setFieldValue to set values for 2 Fields with key-value pairs within the same object. The issue I'm facing: Why does calling setFieldValu ...

Some time ago, I sought help on integrating radio buttons with Material UI and Formik in this thread: Cannot get Material UI radio buttons to work with Formik. Despite receiving a solution, it unfortunately didn't resolve the issue in our specific applic ...

Is anyone familiar with the useFormik hook? I am trying to validate a username and password on the server using the handleLogin(username, password) method. This is the code snippet I am currently working with: const LoginForm = withFormik({ mapPropsToV ...

I'm currently grappling with an issue involving my Formik fields. I need to utilize FastFields in certain scenarios and Fields in others within my FormikControl, a class designed for constructing formik inputs. The challenge lies in being able to switch se ...

Currently, I am in the process of developing an application using React for the frontend and Nodejs for the backend. To handle file storage, I am utilizing multer along with minIO. At the moment, the application includes a form where users can input data ...

As someone who is new to React, I've been exploring how to internally redirect pages in ReactJS. Specifically, I have two pages named "register" and "register2". In the register page, the process involves checking if an email exists in the database. If it ...

I am looking to showcase how validation errors are displayed when a user clears their selection. https://i.stack.imgur.com/ULEgs.png For reference, here is the sandbox link: https://codesandbox.io/p/sandbox/formik-autocomplete-yh3sl7?file=%2Fsrc%2FApp.ts ...

Looking to Add Autocomplete Functionality in Your React Application Using Formik for Seamless Selection of Single and Multiple Values from an Array of Objects? Take a Look at this Code snippet! [see image below] (https://i.stack.imgur.com/ekkAi.png) arra ...

In my current project, I am utilizing React alongside Formik and TypeScript. The code snippet below demonstrates my usage of the withFormik Higher Order Component (HOC) in my forms: import React from 'react'; // Libraries import........ import { Contain ...

Currently enhancing my development skills by working with React. I am looking to streamline the onSubmit property in my project. The application is a contact form built using the Formik component, which uploads data to Firebase Cloudstore and sends an emai ...

Having trouble submitting a form with a dropdown list. Formik doesn't seem to recognize the values from the options for some reason, and I'm not sure how to resolve this issue. const [value, setValue] = React.useState(""); const handleChange = (e ...

Looking to incorporate material-ui into my formik app by utilizing the formik-material-ui library. However, I am facing an issue where validation is triggering before submission when using material-ui textfield components within the fields. I suspect it ma ...

In my current web project, I am utilizing a combination of React, Material-UI, Formik, and formik-material-ui. Specifically, I have implemented a Formik form that includes validation using yup. const schema = yup.object({ name: yup.string().trim().low ...

I'm currently exploring the integration of Formik with a MaterialUI Select component. You can find my sandbox project here: https://codesandbox.io/s/lively-wind-75iliv?file=/src/App.tsx After selecting a new value from the dropdown list, I've n ...

For the past day, I've been working on resolving a bug that has been plaguing me. Everything was functioning perfectly before the update action. I made sure to log all the states before executing the update action. However, after creating a model, t ...

Excuse me, I'm trying to grasp and accomplish something with Formik. I have two select fields and I want to pass their selected values to the formik value. Essentially, they retrieve a list of countries and their respective regions from the CountryArray. ...

When attempting to pass a prop down to my EmailSignupScreen, I encountered an error message. This issue arose while experimenting with Formik and Typescript. "message": "Type '{ refetch: any; }' is missing the following properties from type &apo ...

I recently updated my material-ui version from v4 to v5, but I'm encountering issues with a component that utilizes the react-number-format library. It seems like the problem is related to forwarding refs, and despite my efforts, I haven't been able to res ...

I'm working with mui Drawer, Formik, and React <Drawer anchor="right" open={isOpen} onClose={onClose}> When the drawer is closed, the onClose function is called. There are also props for onBackdropClick and hideBackdrop After closing the ...

This is the main code section for my app const App = () => { const classes = useStyles(); const formik = useFormik({ initialValues: { name: "", email: "", password: "", confirmPassword: "" }, validationSc ...

Date Selection Component: import React from "react" import AdapterDateFns from '@mui/lab/AdapterDateFns'; import { LocalizationProvider } from '@mui/lab'; import { DatePicker, DatePickerProps } from '@mui/lab'; const FormikDatePicker: React.Func ...

I'm currently working on a form using Formik, Yup, and ReactJS. Specifically, I am focusing on the date field validation to ensure that the user is at least 18 years old. Within the validationSchema parameter in Formik, I have included the following code: ...

I am eager to incorporate Formik with MUI, but I am struggling to find a straightforward way to do so. The documentation is confusing and the examples provided are not very helpful. For instance, on this page, which is one of Formik's top-level examples, ...

I recently developed a form using a combination of technologies including react, react-query, material ui, formik, and yup for schema validation. Check out the code here Custom fields I created: SelectField AutocompleteField CacheAutocompleteFie ...

Whenever I attempt to enter text into the input fields, no characters show up. Strangely, a similar login page using the same code is functioning perfectly fine. At this moment, I'm baffled as to why it isn't working on this specific one. My suspicion wa ...

I encountered an error while using the onSubmit prop of Formik: The type '(values: { email: string; password: string; }) => { type: string; payload: { email: string | null; password: string | null; }; }' is not compatible with the type '(( ...

Currently, I am implementing form validation in a React project using both Yup and Formik. The challenge I am facing is with validating a react-select element within the form. To achieve this, I am utilizing the validationSchema property of Formik to valid ...

When I try to use the defaultValue prop in the Autocomplete component of MUI v5, the value always ends up being undefined. This is a snippet from my code: const vehicles = [ { name: "Toyota", model: "Camry" }, { name: "Ford&qu ...

Formik integration with Mui for a button component: import React from "react"; import { Button } from "@mui/material"; import { useFormikContext } from "formik"; const ButtonWrapper = ({ children, ...otherProps }) => { ...

I have implemented Mui AutoComplete as a select option in my Formik Form. <Autocomplete disablePortal options={vendors} getOptionLabel={(option) => option.vendor_company} onChange={(e, value) => {setFieldValue("vendor_id", value. ...

I'm currently working on developing a component that can be reused. The idea is to pass form fields as props, but I ran into an issue when clicking on the datepicker field. The error message that pops up is: TypeError: target is undefined Any sugge ...

I am facing an issue in my Next.js application where I am attempting to validate the upload of an image using Formik and Yup by passing a method called handleOnImageChange in the component. However, I am struggling to make it work this way. I have also tri ...

When defocusing from the field without entering any data, a validation error occurs. Similarly, if you click on the submit button without giving a value, a validation error is triggered - this behavior is expected. However, how can we prevent the validat ...

Having trouble using Formik and MUI Autocomplete with multiple items. Specifically, when searching for "Pencil", it doesn't highlight the item. Also, you can select it twice by clicking on it. Desired outcome: Being able to select one or more items. ...

I am currently utilizing the power of Yup in conjunction with Formik within my react form setup. The fields within the form are dynamic, meaning their validations need to be dynamic as well. export const formData = [ { id: "name", label: "Full n ...

Imagine a scenario where we have a text box in a React application with Formik and Material UI that accepts a price as a floating point number. By default, the field is set to 0. However, once the user manually enters a number, the default value should be ...

I'm struggling to figure out why the validation isn't functioning as expected: export default function Check() { const label = { inputProps: { "aria-label": "termsOfService" } }; const formSchema = yup.object().shape({ ...

Hey there, I'm currently facing an issue while using Formik + Yup to validate my form. I am having trouble validating the number for the date, and whenever I try to interact with any field, the app crashes after adding the number field. Can someone pr ...

I am currently delving into the world of React/Next.js, Formik, and Yup. My goal is to make an API call to the database upon blurring out of an input field. This call will fetch some data, perform database-level validation, and populate the next input fiel ...

Trying to implement a Checkbox tree using Material-UIs Tree with formik for the form (checkboxes). I'm close to achieving it, but facing an issue where clicking on a parent node checkbox should also check its children nodes. Any suggestions on how to ...

There is an action that needs to be handled. It involves saving a new task with its name and description through an API call. export const saveNewTask = (taskName, taskDescription) => async dispatch => { console.log(taskName, taskDescription); c ...

I encountered an error when using the following code:- <FieldArray name="amenities" render={arrayHelpers => ( <div> {values.amenitieslist && values.amenitieslist.length > 0 ? ( val ...

I'm currently developing an application with speech-to-text commands functionality. I have created a form, but I am looking to manipulate the input elements from outside the form framework. <form id="myform"> <input type="text&quo ...

Just joined Yup and struggling to validate an array that is not empty. My tech stack includes react, formik, yup, and material-ui. Here's a sample I put together: Check out the example here I attempted to use the required method in validationSchema: va ...

Here is a snippet of the code I'm working on: https://codesandbox.io/s/busy-bose-4qhoh?file=/src/App.tsx I am currently in the process of creating a form that will accept an array of objects called Criterion, which are of a specific type: export inte ...

It's perplexing why I keep encountering this issue - it has popped up a few times when attempting to utilize nested objects with Formik, React, and TypeScript. It appears that Formik is not compatible with data containing nested objects? https://i.st ...

I'm currently in the process of constructing a web page using React and Formik. Within this form page, I have integrated three distinct Formik forms that are conditionally displayed based on a switch statement. The reason behind structuring it this way is ...

I'm currently creating form onSubmit functions utilizing the useCallback hooks specifically designed for use with the formik library. A sample structure of my component using formik would be as follows: import { useContactForm } from './useCon ...

I am facing an issue with Formic where the value I store does not return to me as expected. The problem arises when the filter finds a specific value and logs it in line 57, then places the same value in Formic on line 58. However, when I log the Formic ...

Greetings everyone! Today, I wanted to address an issue that has been causing some trouble for me recently. I've been utilizing the autoCompletion feature from materiall-ui along with formik in reactjs. However, I've been facing difficulties when it come ...

While working with a form using Formik, Yup, and NextUi v2 Inputs, an issue arises when typing in one of the inputs that triggers a warning in the console: A component is changing an uncontrolled input to be controlled. This warning is usually due to the ...

Working on a study project involving React, Typescript, Formik, and Firebase presents a challenge as the code is not functioning correctly. While authentication works well with user creation in Firebase, issues exist with redirection, form clearing, and da ...

Upon submitting a form using Formik, I encountered a warning that says: "A component is changing a controlled input to be uncontrolled. This issue usually arises when the value changes from a defined to undefined, which should not occur. It's importan ...

Material UI text-fields are being used and validated with Formik. I am looking for a way to map items to avoid repetitive typing, but encountering difficulties in doing so. return ( <div> <Formik initialValues={{ email: '' }} ...

Currently, I am working on a React application with Typescript and using Formik along with Yup validation. However, I have encountered an issue with setting values in a Select element. It seems that the value is not changing at all, or it may be resettin ...

Currently, I'm working on a React application that requires a table with inputs in each row. To achieve this, I am utilizing Material-UI and Formik. However, I've encountered a bug where input fields lose focus whenever I type something into them. This iss ...

When attempting to upload a file, the entire component refreshes each time. The process involves 3 steps: the first step captures the user's name, the second step collects their address, and the third step allows them to upload a profile picture. Howe ...

Currently, I am attempting to integrate the DatePicker component into Formik. However, upon clicking on a date in the DatePicker, the form value does not get updated. Instead, an error occurs: Uncaught TypeError: e.persist is not a function at Formik. ...

I am currently working with a material select component: <FormControl fullWidth variant="outlined" className={classes.formControl}> <InputLabel ref={inputLabel} htmlFor="outlined-age-native-simple"> Filial </InputLabel> <Sel ...

I've encountered an issue with my Formik form that utilizes Yup for validation. I'm having trouble integrating a Datepicker field into the yup validation process. Here's the code where everything renders correctly, but when I try to nest <DatePicker/&g ...

With the React form in my setup, I am utilizing Formik, Yup, and Material UI for forms and textfields: import { TextField } from '@material-ui/core'; This is specifically for the E-mail form. Upon blurring out of the field, it produces the foll ...

Here is the Model (popup) code I am using to send the user's email address to the backend service. The Model component is being rendered in my Login Component. However, I am facing an issue where I am unable to submit this form. Despite having working Yu ...

Greetings! I am currently working on a React project where I am managing the authentication process. I am using Material UI and Formik for validation and handling input changes. However, I encountered an issue with my onchange Formik handler in the TEXTF ...

I am facing an issue with validation. I would like to set a rule that allows selecting both the start_date and end_date only if the access value is 1. Otherwise, if the access value is not 1, then only today's date should be selectable. Check out the code ...

I have noticed that most online examples of handling change events only pass in the event parameter, making the value accessible automatically. However, I encountered an error stating that the value is not found when trying to use it in my handleChange fun ...

I have been trying to set the initial value of a date in my component like this, but when it renders I am encountering an error. const formik = useFormik ({ initialValues: { dob: new Date () } }) During this process, I'm facing the following e ...

I am working on a React and Next.js project where I am using Formik for handling forms and Yup for validations. One specific input field requires some validations to be performed. This field must be required, so if the user does not enter any information, ...

Attempting to integrate Formik with Material UI's Autocomplete component has been a bit challenging. While other Material-UI components like text fields and selects work smoothly with Formik, implementing Autocomplete is proving to be more difficult. ...

My modal is causing all inputs to be re-rendered with every change I make while typing. I have a Formik object set up like this: const formik = useFormik({ enableReinitialize: true, initialValues: { sp_id: data?.id, ...

Hello, I am currently utilizing the FORMIK form in my project and have integrated a few custom components such as a text field and select component. Now, I am looking to incorporate a date and time picker into the form using the Material UI library. Here i ...

I'm facing an issue with the default value in my autocomplete feature within my React app. Even though I set a default value, when I try to submit the form, it still shows as invalid because it appears to have no value until I manually click on the autocom ...

One of my components utilizes useState() to manage the state of its floating label. Here's an example: const FloatingLabelInput = props => { const { value = '' } = props const [floatingLabel, toggleFloatingLabel] = useState(va ...

Is there a way to call a custom function on a Formik field when using the onChange event? I've tried calling it but it's not working as expected. Below is my custom function within a React Component: onStudentScore = (value, form) => { ale ...