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?

If you want to run parent functions in their children, you have to pass that function down as a prop to the child — Jayce444
– Jayce444, Commented Jul 22, 2020 at 5:50
Pass callbacks as props from the parent to the child for the child to invoke. — Drew Reese
– Drew Reese, Commented Jul 22, 2020 at 5:51

Ali Torki · Accepted Answer · 2020-07-22 05:58:13Z

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

tdranv · Accepted Answer · 2020-07-22 05:59:28Z

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;

Vinayaka S P · Accepted Answer · 2020-07-22 06:00:45Z

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

Collectives™ on Stack Overflow

Call parent method in child component React

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related