all the values of clearAllSearchCriteria should be passed to NoResult component

Question

• I am new to react.
• I am trying to call child method from parent in reactjs.
• Here NoResult component is present in SportsCardList component and SportsCardList component is present in Sports-search-favorites-tab
• so here three different components are involving.

• when I click the Clear All Search Criteria div all the values of clearAllSearchCriteria should be passed to NoResult component and from there the values should be passed to Sports-search-favorites-tab.js

• I used the below link and implemented but I am getting an error TypeError: _this.alfoRef.handleDeleteFromParent is not a function. call child function from parent in reactjs

• can you guys tell me how to pass teh value from child to parent since another component is present in the middle. so that in future I will fix it myself.
• providing my relevant code snippets alone below since my codebase is big

TypeError: _this.alfoRef.handleDeleteFromParent is not a function

granfather component 1 Sports-search-favorites-tab.js

import SportsCardList from './SportsCardList';

clearAllSearchCriteria = () => {
    console.log('clearAllSearchCriteria');
    this.alfoRef.handleDeleteFromParent();
}

   render() {
    const { classes } = this.props;

    return (
      <Card className={classes.card}>
        <CardContent style={{ paddingTop: 0, paddingBottom: 0 }}>
          <Typography className={classes.noResultContainer}>
            {/*<div className={classes.noResultContainer}>*/}
            <div className={classes.noResultContainerItemText}>No Results Were Returned</div>

            <CardActions className={classes.noResultContainerItem}>
              <div className={classes.clearAll} onClick={this.props.clearAllSearchCriteria} >Clear All Search Criteria</div>
              {/*<div onClick={() => props.clicked(clearAllSearchVar)}/>*/}
              {/*<div onClick={() => props.clicked(clearAllSearchCriteria)}> Clear All Search Criteria</div>*/}


            </CardActions>

            {/*
            <CardActions className={classes.noResultContainerItem}>
              <Button onClick={this.toggleDrawer("right", true)} size="small">Create task for Custom Payment Build</Button>
            </CardActions>*/}

            {/*</div>*/}
          </Typography>
        </CardContent>
        <Drawer
          style={{ width: 500 }}
          anchor="right"
          open={this.state.right}
          onClose={this.toggleDrawer("right", false)}
        >
          <div
            tabIndex={0}
            role="button"
          >
            {/*sideList*/}
            {/*sports advanced search for tab codes */}

            <TabDemo />
          </div>
        </Drawer>
      </Card>


    );

  }

parent 1(middle component2) SportsCardList.js

import NoResult from './no-result';

clearAllSearchCriteria = () =>{
    console.log('clearAllSearchCriteria');
    this.props.clearAllSearchCriteria();
}

<NoResult clearAllSearchCriteria={this.clearAllSearchCriteria}/>

child(grandson) component 3 no-result.js

return (
  <Card className={classes.card}>
    <CardContent style={{ paddingTop: 0, paddingBottom: 0 }}>
      <Typography className={classes.noResultContainer}>
        {/*<div className={classes.noResultContainer}>*/}
        <div className={classes.noResultContainerItemText}>No Results Were Returned</div>

        <CardActions className={classes.noResultContainerItem}>
          <div className={classes.clearAll} onClick={this.props.clearAllSearchCriteria} >Clear All Search Criteria</div>
          {/*<div onClick={() => props.clicked(clearAllSearchVar)}/>*/}
          {/*<div onClick={() => props.clicked(clearAllSearchCriteria)}> Clear All Search Criteria</div>*/}


        </CardActions>


        {/*
        <CardActions className={classes.noResultContainerItem}>
          <Button onClick={this.toggleDrawer("right", true)} size="small">Create task for Custom Payment Build</Button>
        </CardActions>*/}

        {/*</div>*/}
      </Typography>
    </CardContent>

  </Card>


);

Answer 1

Grandfather component :

clearAllHandler = (clearAllSearchVar) => {
// Work with clearAllSearchVar
}
<Father clicked={this.clearAllHandler} />

Father component :

<Son clicked={props.clicked} />

Son component :

<div onClick={() => props.clicked(clearAllSearchVar)}/>

You should fill clearAllSearchVar in the <Son /> component and whenever you click it the variable is passed to the clearAllHandler function in <Grandfather /> component which passed a reference to the function down to his grand <Son /> through props via the <Father /> .

Hope that helps!

Answer 2

Grandfather:

import SportsCardList from './SportsCardList';

clearAllSearchCriteria = (clearAllSearchVar) => {
    //Work here with clearAllSearchVar
    console.log('clearAllSearchCriteria');
    this.alfoRef.handleDeleteFromParent();
}

<div>
    {/*<NoResult />*/}
    <SportsCardList clicked={this.clearAllSearchCriteria}/>

    <Dialog
        isOpen={this.state.open}
        onClose={() => {
            this.setState({ open: false });
        }}
    />
</div>

Father SportsCardList.js:

    const SportsCardList = props => {
    <NoResult clicked={props.clicked}/>
}

Son NoResult.js:

const NoResult = props => {
<CardActions className={classes.noResultContainerItem}>
    <div className={classes.clearAll} onClick={() => props.clicked(clearAllSearchCriteria)} >Clear All Search Criteria</div>
</CardActions>
}

Just make sure you fill clearAllSearchCriteria variable.