I am using React version less than 16. So, cannot use hooks or redux (any 3rd party tools) in this app.

I have a parent (functional component) having two child (class) components. I need to execute child1's submit(event) method from a button click inside child2 . Kindly help me with a working logic for this.

Edit: This is the real life scenario: There is a parent functional component which has 2 class child components (C1 and C2). I have a C1 class component on left side of screen and C2 class component on right side. In C1, i select some input value and click on "submit" to get some data (upon API call) to be shown on the C2. Now, requirement is : After data got loaded in C2, if i change some inputs in C1 and then click on a "check" button inside C2, the "submit" of C1 should get fired with the latest selected inputs (i.e. the API in C1 will get called with latest inputs).

Below is the skeleton of a simple app structure of the real life app:

parent:

export default function Parent() {
 return (
        <div>
            <C1 />
            <C2 />
        </div>
    );
}

child1:

class C1 extends React.Component{
    constructor(props) {
        super(props);
        this.state = {}
    }
    
    submitC1(event) {
        //do something with event.target by invoking from child2
    }
    
    render() {
        return (
            <div>
                <form onSubmit={this.submitC1.bind(this)}>
                    <input type="text" />
                    <button type="submit">Submit</button>
                </form>
            </div>
        );
    }
}

child2:

class C2 extends React.Component{
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        return (
            <div>
                <button onClick={/*invoke child1 submit method with the event from child1 button itself*/}>Check</button>
            </div>
        );
    }
}

export default C2;

Edit : still looking for answers and it's not a duplicate.