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>


);

score 0 · Answer 1 · answered Dec 14 '18 at 19:18

0

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!

answered Dec 14 '18 at 19:18

kev

1,011
8
15

so my no result component will turn like this right ``` ``` – Dec 14 '18 at 19:46
Can you say it in the family metaphor, please? So, I can better understand. – kev Dec 14 '18 at 19:52
hey if I updated all your code in my child component file
props.clicked(clearAllSearchCriteria)}> Clear All Search Criteria
and it throws two different errors ---> Line 170: 'props' is not defined no-undef Line 170: 'clearAllSearchCriteria' is not defined no-undef – Dec 14 '18 at 19:53
it would be great if you update in my code snippet since its so confusing :( – Dec 14 '18 at 19:54
did you miss this keyword in your answer – Dec 14 '18 at 19:55
You need to pass props the the function constructor of your component like this: clearAllSearchCriteria = (props) =>{... – kev Dec 14 '18 at 19:58
hey I have mentioned three different files in my question, can you tell me in which file...can you directly update in my code snippet – Dec 14 '18 at 19:59
Give me a second, please. – kev Dec 14 '18 at 20:00

score 0 · Answer 2 · answered Dec 14 '18 at 20:15

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.

I updated the child component code in my question, can you update your answer similar to that since if i use your child component code its throwing this errors ``` Line 177: 'props' is not defined no-undef Line 177: 'clearAllSearchCriteria' is not defined no-undef ``` — , Dec 14 '18 at 20:30
hey sorry to say even if I update your code in grandparent component its throwing syntax errors at this line const SportsCardList = props => { . Can you some how help me — , Dec 14 '18 at 20:40

all the values of clearAllSearchCriteria should be passed to NoResult component

2 Answers2