title: Passing values into a Higher Order Component with React and Formik
body: <p>I am currently working with react and formik to make place forms on my page but am running into issues. I currently have a state variable called <code>inputValue</code> that I want to use as the holder of when the user types into the form. The issue I am having is getting that into the <code>handleSubmit</code> within <code>withFormik</code>.</p>
  
  <p>The reason for this is that I want to manipulate the data under certain circumstances. I know I can use <code>values</code> from Formik but I do not know how to manipulate that. Is there a way to pass <code>inputValue</code> into the HoC that is <code>withFormik</code> or is that not possible? </p>
  
  <pre><code>class SendMessageContainer extends React.Component {
     constructor(props) {
        super(props);
        this.state = {
          inputValue: '',
        };
        this.handleChange = this.handleChange.bind(this);
     }
  
    handleChange = (e) =&gt; {
      this.setState({ inputValue: e.target.value });
    };
  
    render() {
       const {
          placeholder,
          values,
          handleChange,
          handleBlur,
          handleSubmit,
          isSubmitting,
          channelId,
       } = this.props;
  
       return (
          &lt;Input
             onKeyDown={(e) =&gt; {
                if (e.keyCode === ENTER_KEY &amp;&amp; !isSubmitting) {
                   handleSubmit(e);
                }
             }}
             onChange={(e) =&gt; {
                this.handleChange(e);
             }}
             onBlur={handleBlur}
             name="message"
             value={this.state.inputValue}
             placeholder={`Message #${placeholder}`}
          /&gt;
       );
     }
  }
  
  export default withFormik({
    mapPropsToValues: () =&gt; ({ message: '' }),
    handleSubmit: async (values, { props, setSubmitting, resetForm }) =&gt; 
    {
       if (!values.message || !values.message.trim()) {
          setSubmitting(false);
          return;
       }
  
       await props.onSubmit(values.message);
       resetForm(false);
    },
  })(SendMessageContainer);
  </code></pre>