score:1

Accepted answer
import React from 'react';
import AjaxForm from './../AjaxForm'

const Add = () => {

    const AddCommentDone=(data)=>{
        console.log('Done', data)
    }

    const AddCommentFail=()=>{
        console.log('Failed')
    }

    return (
        <AjaxForm api='/api/Comment/Add' onSuccess={AddCommentDone}>
            <input name='Comment' placeholder='Text' type='text'></input>
        </AjaxForm>
    )
}

export default Add

score:0

import React from "react";
import axios from "axios";

const AjaxForm = (props) => {
  const handleSubmit = (e) => {
    axios.post(props.api, new FormData(e.target)).then(function (response) {
      console.log(response.data); //Api Response=> {message:'Thank you for your comment',callBack:'AddCommentDone'}
      //run callback of api response on Parent
      props.onCommentDone(response.data);
    });
  };
  return (
    <form onSubmit={handleSubmit}>
      {props.children}
      <button type="submit">Submit</button>
    </form>
  );
};

export default AjaxForm;

score:0

import React from 'react';
import axios from 'axios';

const AjaxForm = (props) => {

    const handleSubmit=(e)=>{
        axios.post(props.api, new FormData(e.target))
        .then(function (response) {
            console.log(response.data) //Api 
              Response=> {message:'Thank you for your comment',callBack:'AddCommentDone'}
              Response.callBack === 'AddCommentDone' ? props.AddCommentDone : props.AddCommentFail;
          });
    }
    return (
        <form onSubmit={handleSubmit}>
            {props.children}
            <button type='submit'>Submit</button>
        </form>
    )
}

export default AjaxForm

Related Query

More Query from same tag