'Formik submits form when change button type

Hello i have a sort of wizard form with 5 steps and i use the same button to go to the next step and submit the form when i reached the last step, the code looks like this

const SomeComponent = (buttonType, callback) => {
  return (
    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
      <Form>
        //render body based on current step
        <Button type={buttonType} onClick={callback}>Next</Button>
      </Form>
    </Formik>
  );
};

basically when i'm on the 4th step and click the button instead od just going to the 5th and last step it submits the form.

a possible solution that i found is rendering a different button entirely like this

buttonType === 'submit' <Button {...props} /> : <Button {...props} />

but it doesn't look so nice, so i was wondering if there is a better way to handle it

reactjsformsreact-hooksformik


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions