CODEWITHSUNDEEP
reactjsformik
Lamer_2005
Lamer_2005

Reputation: 417

Pass values to the state from formik

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?

Upvotes: 3

Views: 15495

Answers (3)

Kyle
Kyle

Reputation: 89

If you don't need the state changes as they are entered, then I would say the best option would be to use the onSubmit function to update your state. This also means it will have passed validation before the state has been updated. It sounds like you have a default validation function so you could also add the validate prop and use that to call your validator.

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

  render() {
    return(
      <Formik
        initialValues={values}
        onSubmit={(values) => {
          // Set updated state here
        }}
        render={({
            submitForm
          }) => (
          <form onSubmit={submitForm}>
            <Field type="text" name="address" onChange={handleChange} />
            <button type="submit">Submit</button>
          </form>
        )}
      />
    )
  }
}

Upvotes: 0

Castrohenge
Castrohenge

Reputation: 8983

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>
        );
    }
}

Upvotes: 2

Pedro Paulo
Pedro Paulo

Reputation: 46

You could do a handleChange method on your class component as bellow:

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

  handleChange = (event) => {
     this.setState({
       inputData: event.target.value
     });
  }

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

Upvotes: 0

Related Questions