Questions tagged [formik]
Formik revolutionizes form handling in both React and React Native, offering an exceptional form library.
I'm currently facing an issue with a dropdown that is supposed to loop through data fetched from the Firebase realtime database. The goal is to assign a selected value to a Formik form for saving it to another object in the database. In my database, I hav ...
Recently, I updated some of the @typescript-eslint modules to their latest versions: "@typescript-eslint/eslint-plugin": "3.4.0", "@typescript-eslint/parser": "3.4.0", After the update, I started encountering the fo ...
I've integrated the @material-ui/pickers package with Formik in my React class component. However, when I attempt to adjust the date and time using the picker, I encounter the following error: TypeError: Cannot read property 'type' of undefined Here's a ...
In my code, I have an initial values list saved as an array: initialValues ={ ranges: [{ fromDate: '', endDate: '' }, { fromDate: '', endDate: '' }, { fromDate: '', endDate: &apos ...
How can I use Yup to validate if the start date overlaps with the end date in a form that creates an event using Formik library? I have two date pickers for choosing the dates and times. I want to display an error message if they overlap. Thanks for the ...
Can you provide a solution for the following scenario: For example, we have a checkout form with multiple delivery options, each requiring different details: In-store - requires only storeId Delivery office - requires cityId and officeId Courier - requir ...
I'm working on implementing the Material UI Toggle Button as a radio button to present 2 choices for a question to the user. Most aspects of it are functioning as expected, but I am facing an issue when trying to customize the style for the selected state ...
In my latest project, I developed a bootstrap form input component that utilizes HOC (Higher Order Component) to change an icon upon submission. The input validation is done through the Formik library. <InputUi placeholder="Enter your email" ...
While using Material UI Switches with Formik, I've encountered an issue. When I toggle the switch to 'enable,' it automatically sets the value in Formik to "true," and when I toggle it to 'disable,' it sets the value in Formik to "false." I am interested ...
I have implemented the validation schema below using Formik: validationSchema = { Yup.object({ emails: Yup.array() .of(Yup.string().email('Ensure to enter valid email addresses only.')) .min(1, 'Please ...
I am working on a complex multi-step form that needs to be built in React using Formik, Material-UI, functional components, and the getState hook. import React, { useState, Fragment } from 'react'; import { Button, Stepper, Step, StepLabel } from '@materi ...
When I reload my React application using Material UI and Formik, the labels of all my textfields get cut off. Strangely, this issue only occurs when the page is reloaded with F5; it doesn't happen when navigating from another screen. <Grid classNa ...
Hey there! I'm currently working on a form using Formik within NextJS and I have integrated a switch to allow users the option of using their contact details for invoicing purposes. While I have separate fields for both contact details and invoice details ...
I'm trying to set up a form where if the region is "Europe" or "other", then certain fields are required. I've looked through the Formik documentation but haven't found a solution yet. <Formik enableReinitialize={true} initialValues={{ name: curre ...
When the validation fails, my goal is for the error message and TextField to be styled like this: View Desired Result Image. Currently, with MUI, I've made progress towards the desired look. Here's where I'm at: View My Progress Image, but I'm unsure how ...
Struggling to set up projects from scratch, encountering an issue with webpack not being able to resolve formik's modules while other third-party modules like styled-components work fine. I've tried searching online for a solution but couldn't find anythin ...