Call parent method in child component React

Question

How can I execute a function of the parent component in the child component according to the api response?

Parent:

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

const Add = () => {

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

    const AddCommentFail=()=>{
        console.log('Failed')
    }
    return (
        <AjaxForm api='/api/Comment/Add'>
            <input name='Comment' placeholder='Text' type='text'></input>
        </AjaxForm>
    )
}

export default Add

Child:

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
          });
    }
    return (
        <form onSubmit={handleSubmit}>
            {props.children}
            <button type='submit'>Submit</button>
        </form>
    )
}

export default AjaxForm

How can I run it in the parent with the name of the function from the api response object?

Answer 1

Pass the required parent component as props to the child component. Parent:

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

const Add = () => {

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

    const AddCommentFail=()=>{
        console.log('Failed')
    }
    return (
        <AjaxForm 
            api='/api/Comment/Add'
            AddCommentDone={AddCommentDone}
            AddCommentFail={AddCommentFail} >
            <input name='Comment' placeholder='Text' type='text'></input>
        </AjaxForm>
    )
}

export default Add

Then in Child:

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

Answer 2

Here is how you can about doing it. As @Jayce444 pointed out, you can pass the function you want to call as props.

import React from "react";
import AjaxForm from "./../AjaxForm";

const Add = () => {
  const AddCommentDone = () => {
    console.log("Done");
  };

  const AddCommentFail = () => {
    console.log("Failed");
  };
  return (
    <AjaxForm api="/api/Comment/Add" onCommentDone={AddCommentDone}>
      <input name="Comment" placeholder="Text" type="text"></input>
    </AjaxForm>
  );
};

export default Add;

And then:

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;

Answer 3

Child should be:

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'}
            props.onSuccess(response.data)
          });
    }
    return (
        <form onSubmit={handleSubmit}>
            {props.children}
            <button type='submit'>Submit</button>
        </form>
    )
}

export default AjaxForm

Parent:

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