Q: How to pass my onSucceeded() function to the parent component? I have 2 components OptinPage (parent) and TermsOfServices (child). Optin Page is only used for rendering the TermsOfServices component, which can be reused elsewhere in the application. I want to use my onSucceeded () function from my child component to my parent component. I don't see how to do it at all. Currently the result is such that when I click on the button that validates the TermsOfServices it seems to be an infinite loop, it goes on and on without closing my popup. Before I split my TermsOfServices component into a reusable component it worked fine. Before, all content was gathered in OptinPage. Any ideas? Thanks in advance
my TermsOfServices component: 
    import API from 'api';
    import React, { PureComponent } from 'react';
    import PropTypes from 'prop-types';
    import {
      Block,
      BlockTitle,
      Col,
      Fab,
      Icon,
      Preloader,
    } from 'framework7-react';
    import { FormattedMessage } from 'react-intl';
    import { connect } from 'react-refetch';
    import ReactHtmlParser from 'react-html-parser';

    class TermsOfServices extends PureComponent {
      static propTypes = {
        agreeTosFunc: PropTypes.func.isRequired,
        agreeTos: PropTypes.object,
        onSucceeded: PropTypes.func,
        tos: PropTypes.object.isRequired,
      };

      static contextTypes = {
        apiURL: PropTypes.string,
        loginToken: PropTypes.string,
        userId: PropTypes.string,
      };

      static defaultProps = {
        agreeTos: {},
        onSucceeded: () => {},
      };

      state = {
        currentTos: -1,
      };

      componentDidUpdate(prevProps) {
        const {
          agreeTos,
          onSucceeded,
          tos,
        } = this.props;
        const { currentTos } = this.state;

        /* Prepare for first tos after receiving all of them */
        if (
          prevProps.tos.pending &&
          tos.fulfilled &&
          tos.value.length &&
          currentTos < 0
        ) {
          this.setState({ currentTos: 0 });
        }

        /* When sending ToS agreement is done */
        if (
          prevProps.agreeTos.pending &&
          agreeTos.fulfilled
        ) {
          onSucceeded();
        }
      }

      handleNext = () => {
        const { agreeTosFunc, tos } = this.props;
        const { currentTos: currentTosId } = this.state;
        const termsOfServices = tos.value;
        const done = currentTosId + 1 === termsOfServices.length;
        this.setState({ currentTos: currentTosId + 1 });
        if (done) {
          agreeTosFunc(termsOfServices.map((v) => v._id));
        }
      };

      render() {
        const { tos } = this.props;
        const { currentTos: currentTosId } = this.state;
        const termsOfServices = tos.value;
        const currentTermsOfServices = termsOfServices && termsOfServices[currentTosId];
        const loaded = termsOfServices && !tos.pending && tos.fulfilled;
        const htmlTransformCallback = (node) => {
          if (node.type === 'tag' && node.name === 'a') {
            // eslint-disable-next-line no-param-reassign
            node.attribs.class = 'external';
          }
          return undefined;
        };

        return (
          <div>
            { (!loaded || !currentTermsOfServices) && (
            <div id="
optin_page_content" className="text-align-center">
              <Block className="row align-items-stretch text-align-center">
                <Col><Preloader size={50} /></Col>
              </Block>
            </div>
            )}
            { loaded && currentTermsOfServices && (
            <div id="optin_page_content" className="text-align-center">
              <h1>
                <FormattedMessage id="press_yui_tos_subtitle" values={{ from: currentTosId + 1, to: termsOfServices.length }} />
              </h1>
              <BlockTitle>
                {ReactHtmlParser(
                  currentTermsOfServices.title,
                  { transform: htmlTransformCallback },
                )}
              </BlockTitle>
              <Block strong inset>
                <div className="tos_content">
                  {ReactHtmlParser(
                    currentTermsOfServices.html,
                    { transform: htmlTransformCallback },
                  )}
                </div>
              </Block>
              <Fab position="right-bottom" slot="fixed" color="pink" onClick={() => this.handleNext()}>
                {currentTosId + 1 === termsOfServices.length &&
                <Icon ios="f7:check" aurora="f7:check" md="material:check" />}
                {currentTosId !== termsOfServices.length &&
                <Icon ios="f7:chevron_right" aurora="f7:chevron_right" md="material:chevron_right" />}
              </Fab>
              {currentTosId > 0 && (
              <Fab position="left-bottom" slot="fixed" color="pink" onClick={() => this.setState({ currentTos: currentTosId - 1 })}>
                <Icon ios="f7:chevron_left" aurora="f7:chevron_left" md="material:chevron_left" />
              </Fab>
              )}
            </div>
            )}
          </div>
        );
      }
    }

    export default connect.defaults(new API())((props, context) => {
      const { apiURL, userId } = context;
      return {
        tos: {
          url: new URL(`${apiURL}/tos?outdated=false&required=true`),
        },
        agreeTosFunc: (tos) => ({
          agreeTos: {
            body: JSON.stringify({ optIn: tos }),
            context,
            force: true,
            method: 'PUT',
            url: new URL(`${apiURL}/users/${userId}/optin`),
          },
        }),
      };
    })(TermsOfServices);

My OptIn Page : 
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import {
  Link,
  NavRight,
  Navbar,
  Page,
  Popup,
} from 'framework7-react';
import { FormattedMessage, intlShape } from 'react-intl';
import './OptInPage.scss';
import TermsOfServices from '../components/TermsOfServices';

class OptinPage extends PureComponent {
  static propTypes = {
    logout: PropTypes.func.isRequired,
    opened: PropTypes.bool.isRequired,
  };

  static contextTypes = {
    intl: intlShape,
    logout: PropTypes.func,
  };

  render() {
    const { opened, logout } = this.props;
    const { intl } = this.context;
    const { formatMessage } = intl;

    return (
      <Popup opened={opened} className="demo-popup-swipe" tabletFullscreen>
        <Page id="optin_page">
          <Navbar title={formatMessage({ id: 'press_yui_tos_title' })}>
            <NavRight>
              <Link onClick={() => logout()}>
                <FormattedMessage id="press_yui_comments_popup_edit_close" />
              </Link>
            </NavRight>
          </Navbar>
        </Page>
        <TermsOfServices onSucceeded={this.onSuceeded} />
      </Popup>
    );
  }
}

export default OptinPage;


A: to access to parent method or attribute you should use super, 
for call to the parent constructor
super([arguments]);

for call parent method
super.parentMethod(arguments);

I recommend create a method on child class and then call the parent method, not directly 
for more information take a look on this 
https://www.w3schools.com/jsref/jsref_class_super.asp

A: Just add the data you want the parent to be supplied with in the child component (when it is hit) and then handle the data passed to the parent in the function that you pass in onSuccess. 
This will roughly look like this:


const {useState, useEffect} = React;

function App(){
  return <Child onSuccess={(data)=>{console.log(data)}}/>;
}

function Child({onSuccess}){
  return <div>
    <button 
      onClick={()=>onSuccess("this is the data from the child component")}>
        Click to pass data to parent
    </button>
  </div>;
}

ReactDOM.render(<App/>,document.getElementById('app'));
#element {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id='app'></div>


<div id="element">
  <div>node 1</div>
  <div>node 2</div>
</div>


