title: How do I change a Formik TextField value from the outside of the From?
body: <p>On a module dialog, I want to change the value of input value (#quaggaIsbn). I tried <code>document.getElementById("quaggaIsbn").value = result.codeResult.code</code> but it wasn't reflected to the values the form sends to the server. How can I change the values Formik sends to the server?</p>
  
  <p><a href="https://i.stack.imgur.com/FJuqI.png" rel="noreferrer"><img src="https://i.stack.imgur.com/FJuqI.png" alt="enter image description here"></a></p>
  
  <p>NewProjectDialog.js</p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types'
  import { Formik, Field, Form } from 'formik'
  import { TextField} from 'formik-material-ui'
  import { makeStyles } from '@material-ui/core/styles'
  import Button from '@material-ui/core/Button'
  import Dialog from '@material-ui/core/Dialog'
  import DialogTitle from '@material-ui/core/DialogTitle'
  import DialogActions from '@material-ui/core/DialogActions'
  import DialogContent from '@material-ui/core/DialogContent'
  import styles from './NewProjectDialog.styles'
  import Quagga from 'quagga';
  
  const useStyles = makeStyles(styles)
  
  function NewProjectDialog({ onSubmit, open, onRequestClose }) {
    const classes = useStyles()
  
    function handleSubmit(values, { setSubmitting }) {
      return onSubmit(values).then(() =&gt; {
        setSubmitting(false)
      })
    }
  
  
  
    function inputFile(){
      const file = document.getElementById("quaggaFile").files[0];
      const reader = new FileReader();
      reader.addEventListener("load", function () {
        // convert image file to base64 string
        analyzeQuaggaFile(reader.result);
        //preview.src = reader.result;
      }, false);
      reader.readAsDataURL(file);
    }
  
    function analyzeQuaggaFile(src){
    Quagga.decodeSingle({
  //    src: "/image-002.jpg",
      src: src,
      numOfWorkers: 0,  // Needs to be 0 when used within node
      inputStream: {
          size: 800  // restrict input-size to be 800px in width (long-side)
      },
      decoder: {
          readers: ["ean_reader"] // List of active readers
      },
    }, function(result) {
        if(result.codeResult) {
            console.log("result", result.codeResult.code);
            document.getElementById("quaggaIsbn").value = result.codeResult.code  ;
        } else {
            console.log("not detected");
        }
    });
  }
  
    return (
      &lt;Dialog open={open} onClose={onRequestClose}&gt;
        &lt;DialogTitle id="new-project-dialog-title"&gt;Sell book&lt;/DialogTitle&gt;
  
        &lt;Formik initialValues={{ name: '' }} onSubmit={handleSubmit}&gt;
          {({ errors, isSubmitting }) =&gt; (
            &lt;Form className={classes.root}&gt;
              &lt;DialogContent&gt;
                &lt;Field
                  id="quaggaIsbn"
                  name="isbn"
                  label="ISBN"
                  component={TextField}
                  margin="normal"
                  fullWidth
                /&gt;
                Scan bar code:&lt;input id="quaggaFile" type="file" accept="image/*" capture="camera" onChange={inputFile}/&gt;
                &lt;Field
                  name="title"
                  label="Title"
                  component={TextField}
                  margin="normal"
                  fullWidth
                /&gt;
                &lt;Field
                  name="status"
                  label="Status"
                  component={TextField}
                  margin="normal"
                  fullWidth
                /&gt;
                &lt;Field
                  name="price"
                  label="Price"
                  component={TextField}
                  margin="normal"
                  fullWidth
                /&gt;
                Book cover:&lt;input id="image" type="file"/&gt;
              &lt;/DialogContent&gt;
              &lt;DialogActions&gt;
                &lt;Button onClick={onRequestClose} color="secondary"&gt;
                  Cancel
                &lt;/Button&gt;
                &lt;Button type="submit" color="primary" disabled={isSubmitting}&gt;
                  {isSubmitting ? 'Creating...' : 'Create'}
                &lt;/Button&gt;
              &lt;/DialogActions&gt;
            &lt;/Form&gt;
          )}
        &lt;/Formik&gt;
  
  
      &lt;/Dialog&gt;
    )
  }
  
  NewProjectDialog.propTypes = {
    onSubmit: PropTypes.func.isRequired,
    open: PropTypes.bool.isRequired,
    onRequestClose: PropTypes.func.isRequired
  }
  
  export default NewProjectDialog
  </code></pre>