Call method from child (class based component) in parent (functional component)

Question

I have been developing a project for three months. I need to call a method from the child component (class-based component) in the parent component (functional component). I used ref for this but it didn't work. Here is the parent component:

import React, { useState, useEffect, useRef, createRef } from "react";
import CityPicker from "../../components/public/cityPicker";
import Chip from "../../components/forms/chip";
import Sidebar from "./sidebar";

import { Router } from "../../routes";
import NextRouter, { withRouter } from "next/router";

const Search = props => {
  const [filterItem, setFilterItem] = useState();

  const deleteFilterItem = createRef();

  const deleteChipHandler = event => {
    filterItem
      ? deleteFilterItem.current.onDeleteSearchableFilterItem(
          event,
          "stateOrProvince",
          "selectedStateOrProvince"
        )
      : "";
  };

  return (
    <>
      <div className={filterItem ? "filters-display" : ""}>
        {filterItem
          ? filterItem.map((item, index) => {
              return (
                <Chip
                  id={item.id}
                  key={index + "selected city"}
                  label={item.value}
                  onDelete={e => deleteChipHandler(e)}
                />
              );
            })
          : ""}
      </div>

      <Sidebar ref={deleteFilterItem} />
    </>
  );
};

export default withRouter(Search);

The onDeleteSearchableFilterItem method belong to the child component.

Does this answer your question? [Call child method from parent](https://stackoverflow.com/questions/37949981/call-child-method-from-parent) — svltmccc, Dec 25 '19 at 13:29
I read this a couple of days ago, but my problem wasn't solved. — S. Hesam, Dec 25 '19 at 13:34

Oner T. · Answer 1 · 2019-12-25T14:41:07.177

Write the function like this in your child component. data is the data you get from your state of that component or a state from reducer if you are using redux(like this.props.data):

 const onDelete = () => {
    this.props.onDelete(data);
    }

then call it in the parent:

import { Router } from "../../routes";
import NextRouter, { withRouter } from "next/router";

const Search = props => {
  const [filterItem, setFilterItem] = useState();

  const deleteFilterItem = createRef();

  const deleteChipHandler = (event, data) => {
    filterItem
      ? deleteFilterItem.current.onDeleteSearchableFilterItem(
          event,
          data
        )
      : null;
  };

  return (
    <>
      <div className={filterItem ? "filters-display" : ""}>
        {filterItem
          ? filterItem.map((item, index) => {
              return (
                <Chip
                  id={item.id}
                  key={index + "selected city"}
                  label={item.value}
                  onDelete={deleteChipHandler}
                />
              );
            })
          : ""}
      </div>

      <Sidebar ref={deleteFilterItem} />
    </>
  );
};

export default withRouter(Search);

Call method from child (class based component) in parent (functional component)

1 Answers1