CODEWITHSUNDEEP
reactjsformikonsubmit
anduplats
anduplats

Reputation: 1003

Using Formik in react to post data

I am beginner in react and want some advice about formik form post. What excatly i should pass to onSubmit?

import React from 'react';
import './style/App.css';
import {LoginForm } from "./login/LoginForm"

function App() {

  return <div style={{textAlign : "center"}}>
    <LoginForm onSubmit={({})=>{
      
    }} />
  </div>
}

export default App;

And i also have LoginForm in that way:

interface Values {
  username: string;
  password: string;
}

interface Props {
  onSubmit: (values: Values) => void;
}

export const LoginForm: React.FC<Props> = ({ onSubmit }) => {
  return (
    <Formik
      initialValues={{ username: "", password: "" }}
      onSubmit={values => {

      }}>

      {({ values }) => (
        <Form>
          <div>
            <Field
              name="username"
              placeholder="Username"
              component={MyField}
            />
          </div>
          <div>
            <Field
              type="password"
              name="password"
              placeholder="Password"
              component={MyField}
            />
          </div>
          <Button type="submit">submit</Button>
        </Form>
      )}
    </Formik>
  );
};

I pass need to pass the values to the interface to post. I cannot do it inside LoginForm. The component would be useless in that sence. How to do it?

Upvotes: 1

Views: 3169

Answers (1)

Menawer
Menawer

Reputation: 883

You just have to pass the function that deal with the values, for example, send a request to your backend via "post" or "get" request using "fetch" builtin JS or "axios" package,

Formik will send the fields values to that function (the one you pass to OnSubmit) and you deal with them based on what you desire.

Upvotes: 2

Related Questions