updatequery react query

 // MyForm.js

import React from 'react';

import { Formik, Form, Field } from 'formik';

import * as Yup from 'yup';

import { useMutation } from 'react-query';

import axios from 'axios';


const MyForm = () => {

  // Define your form schema using Yup

  const validationSchema = Yup.object({

    name: Yup.string().required('Required'),

    email: Yup.string().email('Invalid email address').required('Required'),

  });


  // Define the mutation for posting data

  const mutation = useMutation((newData) => {

    return axios.post('https://example.com/api/data', newData);

  });


  return (

    <Formik

      initialValues={{ name: '', email: '' }}

      validationSchema={validationSchema}

      onSubmit={(values, { setSubmitting }) => {

        mutation.mutate(values, {

          onSuccess: () => {

            setSubmitting(false);

            alert('Data posted successfully!');

          },

          onError: (error) => {

            setSubmitting(false);

            alert('Error posting data: ' + error.message);

          },

        });

      }}

    >

      {({ isSubmitting }) => (

        <Form>

          <div>

            <label htmlFor="name">Name</label>

            <Field name="name" type="text" />

          </div>

          <div>

            <label htmlFor="email">Email</label>

            <Field name="email" type="email" />

          </div>

          <button type="submit" disabled={isSubmitting}>

            Submit

          </button>

        </Form>

      )}

    </Formik>

  );

};


export default MyForm;


Comments

Popular posts from this blog

interview questions js[ Anurag Singh ProCodrr]

reactnative_creation