Change input value through click on button

Question

I currently struggle with the button "Auto generate link". Once clicked, the Field "link" should be filled with the data "http://predefinedlink.com"

Due to the combination of Formik + Material UI used here, I struggle to achieve that.

const useStyles = makeStyles((theme) => ({[...]}));

const EventStream = ({ onSubmit, eventStream }) => {
  const classes = useStyles();

  return (
    <Formik
      initialValues={{
        link: maybe(() => eventStream.link, "") || "",
      }}
      onSubmit={onSubmit}
      validateOnBlur={false}
      validateOnChange={false}
      enableReinitialize
    >
      {({ handleSubmit, isSubmitting, dirty }) => (
        <FormikForm autoComplete="off" noValidate>
          <Card>
            <CardContent>
              <Grid container spacing={3}>
                <Grid xs={12} item>
                  <Field name="link" label="Link" component={TextField} />
                  <button
                    onClick={console.log("Fill TextField 'link' with new data")}
                  >
                    Auto generate link &raquo;
                  </button>
                </Grid>
              </Grid>
            </CardContent>
            <CardActions className={classes.cardActions}>
              <Button
                variant="contained"
                color="primary"
                classes={{
                  root: clsx(classes.saveButton, {
                    [classes.saveButtonDirty]: !dirty,
                  }),
                  disabled: isSubmitting && classes.saveButtonDisabled,
                }}
                disabled={isSubmitting || !dirty}
                onClick={handleSubmit}
              >
                Save
                {isSubmitting && (
                  <CircularProgress
                    size={20}
                    thickness={5}
                    color="inherit"
                    className={classes.saveButtonProgress}
                  />
                )}
              </Button>
            </CardActions>
          </Card>
        </FormikForm>
      )}
    </Formik>
  );
};

export default EventStream;

Answer 1

You may need to use setFieldValue

{({ handleSubmit, isSubmitting, dirty }) => (

to

{({ handleSubmit, isSubmitting, dirty, setFieldValue  }) => (

The button click handler

             <button
                onClick={()=> {

                 setFieldValue ('link',  'http://predefinedlink.com')
                 }
               }
              >
                Auto generate link &raquo;
              </button>