score:28
@djheru your solution is correct because formik sets touched
flags on blur
event instead of on change
. here is formik author comment about this:
you have to call formiks handleblur
to notify formik that blur
event has been triggered - so yes, these handlers are needed.
score:25
i got it working by accessing the handleblur
function that's passed in the render
function argument, and adding that as an onblur
handler for each of the form elements. not sure if that's needed because i'm using react-bootstrap form components, but the react-bootstrap docs have a formik example, but the touched
object was not getting updated.
(
<formik
validationschema={schema}
onsubmit={submitform}
initialvalues={{ name, email }}
render={({
handlesubmit,
handlechange,
handleblur, // handler for onblur event of form elements
values,
touched,
errors,
}) => {
return (
<form novalidate classname="mt-4" onsubmit={handlesubmit}>
<form.row>
<form.group as={col} controlid="namecontrol">
<form.label>full name</form.label>
<form.control
name="name"
required
value={values.name}
onchange={handlechange}
onblur={handleblur} // this apparently updates `touched`?
isvalid={touched.name && !errors.name}
isinvalid={touched.name && errors.name}
type="text"
placeholder="your child's name"
/>
<form.control.feedback>looks good!</form.control.feedback>
<form.control.feedback type="invalid">
{errors.name || 'please enter your child\'s name'}
</form.control.feedback>
</form.group>
</form.row>
Source: stackoverflow.com
Related Query
- Why isn't the Formik `touched` property being populated?
- why is the name property not being displayed
- React Native - Why we use the tintColor property for Image component?
- Why my font-awesome icons are being displayed big at first and then updated to the right size?
- Why is only the last item in a map function being changed in react app?
- Why we use the removeClippedSubviews property in the View component in react-native?
- Why is the componet being re-rendered twice?
- Why is the Redux store being updated with a duplicate nested key?
- setFieldValue, Formik and InvalidStateError: Failed to set the 'value' property on 'HTMLInputElement'
- Why the TypeError: Cannot read property '0' of undefined?
- In react class component why is the state not being changed in the first instance of button click? But in the second instance it gets updated?
- Why is initial state being set over and over again in the "useState" hook of react
- Why isn't my document title property being updated?
- Trying to refactor the onSubmit property using Formik
- Why value from a Material-UI Button is not being passed to the onClick event handler?
- Basic React: why is a variable in local storage resetting to undefined after briefly being the desired value?
- Why can't I read the property value in event
- Why is setInterval not being cleared in REACT the same way as it is in vanilla JS
- Why is the 'exhaustive-deps' rule being triggered while I don't change any dependancies of my useEffect hook?
- Why is state being updated to latest message if I use the spread operator?
- Why is the value of a React controlled input element not being updated properly from a Chrome extension?
- why isnt the flex attribute working in react styled components?
- Why I am getting the Typerror cannot read property map of undefined, despite the my transaction state object is updating dynamically?
- Why this event handling function is being called twice and updates the state twice in react?
- Why does the setTimeOut not being cleared by using clean up function in React (useEffect)?
- Why is React onLeave={} being executed for every single page switch, instead only in the assigned one?
- Why is the table data not being rendered?
- Component making axios request being mounted twice in order for asynchronous test to pass, if it is mounted once the test fails. WHY
- Why does the transform-origin CSS property not show up in React?
- Why is React Bootstrap Card not showing in the browser? The page is empty despite the component being used
More Query from same tag
- React navbar not coming full screen
- Fetching genre list from TMDB using useEffect and axios stuck on loading
- TypeError: Cannot read properties of undefined (reading 'toLocaleString')
- Unable to connect component to Redux store
- React Router confusion
- tell render code to wait until object is recieved
- ref to form element is null when submitting the form
- Placing components on the right and around other items in React problem
- Remove Strings From Array
- Next.JS Static site generation and client-side Apollo fetching
- Updating state with nested array of objects without mutation
- React.js can't change checkbox state
- How to add/remove in Array inside dynamic Object
- Value in useSelector return before dispatch
- How to update several states at the same time if their value depend on each other with react hooks
- Using data from one component in another in Reactjs
- Is it possible to have simple filter in the colmns header when using Mui datagrid?
- React meta tags not working for Facebook
- How to use Babylonjs in Reactjs Application?
- can't type in input fields when using material-ui-redux-form due to re rendering
- How to test conditional rendering in React using Jest? Does the wrapper update on new component render?
- Why I can't install React and uninstall create-react-app in my system?
- How to invoke a React-router client side redirect to a new url in JS without using <Link>
- Hello! I'm trying to make a chart with a json received from backEnd, and I can't parse it
- Running React method after another
- React js - Using Bootstrap4 CDN, How to manually enable javascript event handlers in react?
- How to use reach router with React Context API?
- Can you use CSS transitions on SVG attributes? Like y2 on a line?
- "Reset" button won't work unless it refreshes page, and gives me an error otherwise (React.JS)
- How to loop through axios response