title: Accessing a function/state of a component in a wrapping HOC
body: <p>So I have a component A (extends React.component) and it is wrapped with a higher order component B.</p>
  
  <p>In component B's methods, I need to setState for A, or call a function in A (so that it can do the setState) - how is this generally done?</p>
  
  <p>I can paste actual code here, but I thought it may complicate matters if there are standard ways of handling this situation.</p>
  
  <p>Edit: here's the code - isOpen needs to change for the Modal to close, and it needs to change in handleSubmit....</p>
  
  <pre><code>import React from 'react';
  import Modal from 'react-modal';
  import { withFormik, Form, Field } from 'formik';
  import Yup from 'yup';
  
  // first part of Formik integration
  const formikEnhancer = withFormik({
    mapPropsToValues(props) {
      return {
        personName: props.email || '',
        personSurname: props.surname || '',
        personCongregation: props.congregation || ''
      }
    },
    validationSchema: Yup.object().shape({
      personName: Yup.string().required().min(1),
      personSurname: Yup.string().required().min(2),
      personCongregation: Yup.string().required().min(8)
    }),
    handleSubmit(values, {props, resetForm, setErrors, setSubmitting}) {
      submitNewPerson(values, {resetForm, setErrors, setSubmitting});
      props.testCall;
    }
  });
  
  function submitNewPerson(v, {resetForm, setErrors, setSubmitting}) {
    //e.preventDefault();
  
    congregations = [];
    congregations.push(v.personCongregation);
  
    const peep = {
      name: v.personName,
      surname: v.personSurname,
      congregations: congregations//,
      //startDate: Number(e.target.componentStartDate.value),
      //endDate: Number(e.target.componentEndDate.value)
    };
      // do the db insert here and check for errors
      setSubmitting(false);
    });
  };
  
  class AddPerson extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        error: undefined,
        isOpen: false
      }
    }
  
    componentWillMount() {
      Modal.setAppElement('body');
    }
  
    renderCong() {
      // this just maps out a list of select options
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;button className="button" onClick={()=&gt; this.setState({isOpen:true, error:undefined})}&gt;+ Add Person&lt;/button&gt;
          &lt;Modal isOpen={this.state.isOpen} contentLabel="Add Person"
            className = "boxed-view__box" overlayClassName="boxed-view boxed-view--modal"&gt;
            &lt;Form className="boxed-view__form"&gt;
              &lt;div&gt;
                &lt;Field type="text" name="personName" placeholder="Name" /&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;Field type="text" name="personSurname" placeholder="Surname" /&gt;
              &lt;/div&gt;
              &lt;div&gt;
               &lt;Field component="select" name="personCongregation" value={this.state.cong}&gt;
                  &lt;option key="0" value=""&gt;- Select Option -&lt;/option&gt;
                  {this.renderCong()}
                &lt;/Field&gt;
              &lt;/div&gt;
              &lt;button disabled={this.props.isSubmitting} className="button"&gt;Add Person&lt;/button&gt;
              &lt;button disabled={this.props.isSubmitting} type="button" className="button button--secondary" onClick={
                ()=&gt; {
                  this.props.resetForm();
                  this.setState({isOpen:false});
                }}&gt;Cancel&lt;/button&gt;
            &lt;/Form&gt;
  
          &lt;/Modal&gt;
        &lt;/div&gt;
      )
    };
  };
  </code></pre>