Pass values to the state from formik

Question

I use formik for forms in my react app.

class myComponent extends Component {
  constructor(props) {
    this.state = {
      inputData: {}
    }
  }

render() {
  return(
    <Formik>{({ errors, handleChange, values }) => (
      console.log(values);
      <Field type="text" name="address" onChange={handleChange} />
   )}
   </Formik>
  )
}
}

The question: how i can pass values to the state?

Answer 1

I think the recommended best practice is to only use Formik state in order to avoid any side effects of having the state stored in 2 locations (Formik + the component state). I was also looking to achieve what you wanted and found the following component - https://github.com/jaredpalmer/formik-effect - that will let you decorate the handleChange function. However after reading the README for this component I decided to only use the Formik state and pass it's values to any function that require values within that state.

To pass the values to a function I used the following pattern:

class Example extends Component {
    handleValues(values) {
        // Do something with values
    }

    render() {
        return (
            <Formik>
                ({values}) => {<button onClick={() => this.handleValues(values)}>Do something</button>}
            </Formik>
        );
    }
}