Skip to content

How to add Formik to any form

Victor Ocnarescu edited this page Oct 3, 2021 · 2 revisions

This template includes Formik by default and you can add Formik to any static form using this guide:

Add the model

The model describes the subject of the form and its two main components are validation schema and initial values.

const validationSchema = Yup.object().shape({
  name: Yup.string().required(),
};

const initialValues = {
  name: '',
};

Add the API logic

The API logic represents the goal of the form submission, like creating a new todo or updating an existing one.

const createTodo = async (data) => {
  return await axios.post('todos', data);
};

const updateTodo = async (data, uuid) => {
  return await axios.put(`todos/${uuid}`, data);
};

const removeTodo = async (uuid) => {
  return await axios.delete(`todos/${uuid}`);
};

Add mutations

[...]