React useEffect(), fetch data with React Hooks and set the formik form

Viewed 1192

I want to fetch these (title, description, category) values to the following form. how can I do this?. I'm working on a Formik form that needs to adjust dynamically depending on data. I want to set data to the correct form field when the user going to edit something. I think something missing in my code. any help would be great.

const PostEdit = ({ match, history }) => {

  const postId = match.params.id    
     
  //Data
  const [initialValues, setInitialValues] = useState({
    title: '',
    description: '',       
    category: '',
  })    
    
  const dispatch = useDispatch()

  const postDetails = useSelector((state) => state.postDetails)
  const { loading, error, post} = postDetails

  useEffect(() => {
    if (!post.title || post._id !== postId) {
      dispatch(listPostDetails(postId))
    } else {
      setInitialValues({
        title: post.title,
        description: post.description,           
        category: post.category

      })
    }
  }, [dispatch, history, postId, post,])

  const submitHandler = () => {}

  return (
    <>
      <div>
        <Grid>
          <Grid item xs={12}>            
              <Papervariant='outlined'>
                <Formik
                  initialValues={initialValues}
                  validationSchema={validationSchema}
                  onSubmit={submitHandler}
                >
                  {({ dirty, isValid, values }) => {
                    return (                      
                        <Form>
                          <DialogContent>
                            <Grid item container spacing={1} justify='center'>
                              <Grid item xs={12} sm={12} md={12}>
                                <Field                                      
                                  label='Title'                                                                         
                                  name='title'
                                  required
                                  value={values.title}
                                  component={TextField}
                                />
                              </Grid>
                              <Grid item xs={12} sm={12} md={12}>
                                <Field                                    
                                  label='Description'                                                               
                                  name='description'
                                  value={values.description}
                                  component={TextField}
                                />
                              </Grid>
                              <Grid item xs={12} sm={12} md={12}>
                                <Field                                     
                                  label='Category'                                                             
                                  name='category'
                                  value={values.category}
                                  component={TextField}
                                />
                              </Grid>
                            </Grid>
                          </DialogContent>
                          <DialogActions>
                            <Button
                              disabled={!dirty || !isValid}
                              variant='contained'                               
                              type='Submit'
                            >
                              Add
                            </Button>
                          </DialogActions>
                        </Form>                     
                    )
                  }}
                </Formik>
              </Paper>            
          </Grid>
        </Grid>
      </div>
    </>
  )
}

export default PostEdit

enter image description here

2 Answers

You are missing this prop

enaleReinitialize={true}

So, it should be something like this

<Formik
   enableReinitialize={true} // You missed this prop
   validateOnChange={true}
   initialValues={initialValues}
   
Related