score:1
Accepted answer
the state value q
is undefined
the first time the page loads because you're not setting an initial value when you created the state like this
const [q, setquiz] = usestate();
to resolve this issue you have to either pass in the initial value during the state definition like this
const initialquizvalue = {} // whatever defaults you want
const [q, setquiz] = usestate(initialquizvalue);
or check that q
is available before rendering the formik
component like this
const quizedit = () => {
const { id } = useparams();
const [focused, setfocused] = usestate(false);
const [submitbtnhover, setsubmitbtnhover] = usestate(false);
const [q, setquiz] = usestate()
useeffect(() => {
...
}, []);
if (!q) {
return 'loading quiz data...'
}
return (
<div classname='formiknewquiz'>
<formik
initialvalues={{
question: q["question"],
answers: ['', ''],
correctanswer: '',
category: '',
createdat: new date(),
likes: 0,
}}
>
...
</formik>
)
}
Source: stackoverflow.com
Related Query
- how to set an initial value to Form created by Formik and Yup
- How to set pre-field data in initial value of formik form in reactjs
- How to set initial state value for useState Hook in jest and enzyme?
- React + Formik - how to pass in new values and set form as dirty?
- How to create custom validation in a field that need value from another field using formik and yup
- How to set different password requirements with Formik and Yup depending on locale?
- How to set the value of form field based on another form field using react, typescript and formik?
- How to set the initial state value after fetching data to update a form in react
- How to set react state to some initial state based on the value of formfield using react and typescript?
- How to validate form using Yup and Formik
- How to set initial state for useState Hook in jest and enzyme?
- How to reset initial value in redux form
- How to do POST in FORM Submit using reactjs and pass the object value into REST service?
- How to connect simple Formik form with Redux store and dispatch an action?
- How to handle form state with Formik and Redux-Saga
- How to update specific form field in formik when value changes in redux store?
- How to set defaultValue, value={this.props.value}, and update the value of a text input with React?
- How to set focus on a TextField\input using a Formik form when initialValues are passed through\bound to props.object?
- REACT - Set initial data in Formik Form after fetching from API
- In Redux Form, how can I set the initial value of the checked property of a checkbox?
- React Hooks Form Reset dont set Select to initial value
- How to show Form error summary using Formik with yup validationSchema
- How do I set a default value for a select menu in my React form component?
- How to give default value and placeholder to redux form select field?
- How to take input value from submit form and store in redux store variable?
- react-final-form - How to reset form and set state
- How to change validateOnChange and validateOnBlur in formik to true after the first form submission?
- How to set initial state value in Gatsby based on the result from static query?
- How to have No Initial Values in Form using Formik & TypeScript?
- How to set and get value of redux-form field
More Query from same tag
- How can i delete key from the object?
- Is there a way to upload a file in React Dropzone with Puppeteer?
- How do I edit a todo in React
- React & MobX - Confirmation dialog when a user navigates away from the existing page
- React Typescript: Argument of type '{ [x: number]: any; }' is not assignable to parameter of type
- How to create sticky header with flexbox and REACT
- Getting Data from Fetch Post that returns response data
- How do I fast-forward the audio in my react component?
- Nested query in Reactive Component - ReactJS
- How to set state in test when using enzyme and jest?
- How to render nested classes with style-loader?
- Why am i getting this error in my React application?
- How to avoid very long paths and use absolute paths within a Create React App project?
- How to set backEnd URL in frontEnd react
- Is there a better way to pass props to a component in React?
- How to get data-attribute in React?
- React doesnt load image from url
- Redux Saga All effects proper usage
- Should I pass useSelector to useState
- React useState not updating value in async function
- Limit function call to maximum 15 times in a miunte's interval
- Redux state returns undefined, after state update
- State update in event listener react hooks
- Trying to make a reuseable DataGrid component with my own defaults from ReactDataGrid, but Typescript giving me errors
- How to concat a string and a props in React
- How to exhibit a json with internal vectors?
- Best way to check if user is logged-in when he opens the website
- How to proper setup setTimeout with recursively using React hooks?
- React Lifting State Up using Ancestor
- Adding refs to components passed in an array