React component of grandparent callback doesnt re-render page after being call in grandchild

Question

I am calling a handle method (to change state) in a <grandchild> component but it stop rendering after a couple of callback in the <grandparent> component.

I have tried to:

1. setting bind correctly with both this.bind in construct and arrow method.

2. making sure the call back is call everytime the prop.callback is call.

This is an example of what I'm trying to do with graphql server:

Grandparent Component

//Graphql constant for query
const ApolloConstant = gpl`
...etc

class Grandparent extends Component {
    constructor(props) {
        super(props);
        this.state = { vars: 'query_string' }
    }

    handler = (args) => {
        this.setState({vars: args})
    }

    render() { 
        return ( 
            // For requerying graphql with search
            <input onChange={() => this.setState(vars: e.target.value)} /> 

            <Query variable={this.state.vars}>
                ...code -> some_data_arr
                {<ChildComponent data={some_data_arr} handler={this.handler}/>}
            </Query>
         );
    }
}

Child Component

//This component will take in an arr of obj and display a obj list
// if one of the obj is clicked then render a child component to display that single obj

class Child extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            singleData: null
         }
    }
    render() { 
        return (
            // Ternary operator here for conditional rendering
            {
                this.state.singleData
                ? <Grandchild data={this.state.singleData} handleParentData={this.props.handler} />
                : this.display_data(this.props.data)
            }
         );
    }

    //Method to call to display objects
    display_data = () => {
        this.props.map() => 
        <div onClick={this.setState({singleData: data})} > ...some code to display data <div/>
    }
}

Grandchild Component

class Grandchild extends Component {

    render() { 
        return ( 
            {...do some code with object props here}
            <Button onclick={(this.props.handleParentData(vars))} >Btn</Button>
         );
    }
}

When I test this, everything works for the first 3-4 render then no more re-rendering even though the callback is going through. I check to see if the method in <grandparent> is being call and it does but the state stop changing. Even after going to a new route (react router) and then coming back, I still cant change state with that callback.

Answer 1

<Button onclick={(this.props.handleParentData(vars))} >Btn</Button>

I think the problem is the function being called right into the onclick prop, you should probably have it wrapped in another function so it is only called when you actually trigger the onclick listener:

handleClick = () => { 
  this.props.handleParentData(vars)
}

render() { 
    return ( 
        {...do some code with object props here}
        <Button onclick={(this.handleClick)} >Btn</Button>
     );
}