Formik value is undefined

Viewed 1809

Why I can't get the data every time I change the field? can somebody help me to configure this out? did I miss something in my code? I just want that if the user clicks the submit, it will capture what I inputted in TextField and Select

  const [ author, setAuthor] = useState('');
  const [ datef, setDateF] = useState('');
  const [ datet, setDateT] = useState('');
  const handleChangeAuthor = (event) => {
    console.log("handleChangeAuthor: ", event)
    setAuthor(name)
  };
  const handleChangesetDateF = (event) => {
    console.log("handleChangesetDateF: ", event)
    setDateF(name)
  };
  const handleChangesetDateT = (event) => {
    console.log("handleChangesetDateT: ", event)
    setDateT(name)
  };


const handleSubmit= async(valuesToSubmit) =>
{
  console.log("valuesToSubmit: ", valuesToSubmit)
}


 ............
  <Formik
     initialValues={{ 
     strdatefrom:datef,
     strdateto:datet,
     intuserauthorid:author,
     intfmdocumentclassificationsid:selecteddocClassification,
     intlimit:"100",
     intoffset:"0"
    }}
    onSubmit={(values) =>{ console.log("submit"); handleSubmit(values)}}
     >
  {({ handleChange, handleBlur, handleSubmit, values, errors, isValid,touched,setFieldValue }) => (
     <>

<Grid container>
   <Grid xs={12} className={classes.grid}>
      <TextField
         id="date"
         label="Date from"                  
         type="date"
         name="datet"
         onChange={handleChangesetDateF(value.datet)}
         defaultValue="2017-05-24"
         name="datef"
         className={classes.textField}/>
   </Grid>
   <Grid xs={12} className={classes.grid}>
       <TextField
          id="date"
          label="Date to"
          type="date"
          name="datef"
          onChange={handleChangesetDateT(value.datef)}
          defaultValue="2017-05-24"
          className={classes.textField}/>
    </Grid>
    <Grid xs={12} className={classes.grid}>
        <FormControl variant="outlined" className={classes.formControl}>
            <InputLabel htmlFor="outlined-age-native-simple">Author</InputLabel>
               <Select
                   name="author"
                   value={author}
                   onChange={handleChangeAuthor(value.author)}
                   label="Author">
                 {users}
                 </Select>
            </FormControl>
          </Grid>
         </>
              )}
            </Formik>

from this line please ignore this message, I do this message so that i can submit a question here

1 Answers

You Dont have to use a local state for formik, formik can manage the state internally so you will have to do something like this to update the value.

<TextField
         id="date"
         label="Date from"                  
         type="date"
         name="datet"
         onChange={event=>setFieldValue('datet',event.target.value)}
         defaultValue="2017-05-24"
         name="datef"
         className={classes.textField} 
         value={values.datet}/>

The setFieldValue in formik can update the formik state which you can retrieve in handlesubmit call

Related