Formik

import React from 'react';

// Бібліотека формік
import { Formik, Form, Field } from 'formik';

//  Компонент форми
const RegisterForm = () => {
  // початкові значення полів форми
  const initialValues = { name: '', email: '', password: '' };

  // Обробник сабміту
  const handleSubmit = (values, actions) => {
    // у обʼєкт values повертаються дані з форми
    console.log('values', values);
    // тут буде проходити реєстрація
    actions.resetForm();
  };

  return (
    <div>
      <Formik
        initialValues={initialValues}
        onSubmit={handleSubmit}
      >
        <Form autoComplete="off">
          <label htmlFor="name">Name</label>
          <Field type="text" name="name" placeholder="Enter your name" />

          <label htmlFor="email">
            Email
            <Field type="text" name="email" placeholder="Enter email" />
          </label>

          <label htmlFor="name">
            Password
            <Field
              type="password"
              name="password"
              placeholder="Enter password"
            />
          </label>

          <button type="submit">Sign Up</button>
        </Form>
      </Formik>
    </div>
  );
};

export default RegisterForm;

Last updated