Javascript – state variables returns undefined
I need help with managing react states, I can't seem to wrap my head around it. I have a component that receives the id of a database entry from another page via useLocation, I then use that id with an…
Reactjs – How to prevent toast when unmounting a component?
I'm trying to prevent toast, when component unmount, if user click onSubmit. Trying to do with useState, but it didn't work for me. My goal is to show user toast but if he click onSubmit, he shouldn't have to see…
Javascript – Material UI Autocomplete Categories in ReactJS
I'm using MUI Autocomplete and Formik and I wanted to group this into categories. If it has no sub_accounts, then it shouldn't have a header label. Something like this: https://mui.com/material-ui/react-autocomplete/#grouped CODESANDBOX ------> CLICK HERE Expected outcome on the UI is…
Javascript – Pass newly defined props to a (functional) component passed as props
Let's say I have a parent component like the following: <ParentComponent contentComponent={ <GenericContent content={<FormContent title="Content Title" formComponent={<ChildComponent />} />} /> } /> Now, in my FormContent component, I would like to pass props to my formComponent which in this example…
Reactjs – Which form library is better for react – Formik or React Hook Forms
I and my team are working on a React project these days, and I am new to the React. We are strugling to choose a better form library for my React application. There are multiple choices in out there, but…
Reactjs – Formik: set value based on previous value
Is there a possibility to set a formik value based on the previous value? Here a simple example: const onButtonClick = () =>{ Array.from(Array(5).keys()) .forEach((num) => formik.setFieldValue("testvalue", formik.values.testvalue + num)); }; } The problem is, that if some functions run…
Reactjs – Formik validation does not work with Material UI Autocomplete
I want to display the validation error when user clears the selection. The sandbox link is https://codesandbox.io/p/sandbox/formik-autocomplete-yh3sl7?file=%2Fsrc%2FApp.tsx%3A1%2C1-84%2C1 When the form initial loads with default value. Clearing the value does not trigger the validation. Refresh the page. Click on submit. Clear…
Reactjs – How to have checkboxes checked by default using useFormik?
I have these components and I have 12 checkboxes in child component. I want to have them checked by default when the component loads. I can't do that. I can't use checked='true' as an attribute for my input because formik…
Reactjs – With Formik and Yup, how do I display a form error for a field of a nested object?
I'm using React 18, Ionic 7, Formik 2.4 and Yup 0.32. I have an object with a nested object export type Person = { name: string address: Address } The address objecdt is defined as export type Address = {…
Reactjs – Checking fields value based on value of another field using Yup and Formik
I'm trying to use yup to check if the field industryNameOther is not left empty but I want to perform this check only if field industryName, which is an array of strings, includes a string 'other'. What am I doing…