title: How to pass props and their methods dynamically to a component in React?
body: <p>I have a Parent Component that loads child components dynamically:</p>
  
  <p>Parent Component:</p>
  
  <pre><code>// ... lifecycle methods et al
  
     setOverviewRef(ref) {
      this.OverviewHeader = ref;
    }
  
    setBowSizeCompareRef(ref) {
      this.bowSizeCompare = ref;
    }
  
    setDualVideoRef(ref) {
      this.dualVideoRef = ref;
    }
  
  render() {
  
      const showComponent = (componentName, {refToPass, refMethod}) =&gt; {
        if (typeof this.state[`${componentName}`] !== undefined &amp;&amp; this.state[`${componentName}`] !== null) {
          const Component = this.state[`${componentName}`].default;
          console.log('{refToPass, refMethod}: ', {refToPass, refMethod});
          return (
            &lt;Component {...{ refToPass: this[`${refMethod}`] }} /&gt;
          );
        } else {
          return null;
        }
      }
  
      return (
        &lt;section&gt;
          &lt;OverviewHeader overviewRef={this.setOverviewRef} /&gt;
          { showComponent('BowSizeCompareComponent', {refToPass: 'bowSizeCompareRef', refMethod: 'setBowSizeCompareRef' }) }
          { showComponent('DualVideoComponent', {refToPass: 'dualVideoRef', refMethod: 'setDualVideoRef' }) }
        &lt;/section&gt;
      );
    }
  </code></pre>
  
  <p>Assuming that I want the BowSizeCompareComponent, how do I get it so the <code>Component</code> that is returned from <code>showComponent</code> is in the form:</p>
  
  <pre><code>&lt;Component bowSizeCompareRef={this.setBowSizeCompareRef} /&gt;
  </code></pre>
  
  <p>If it was <code>DualVideoComponent</code>, should be in form:</p>
  
  <pre><code>&lt;Component dualVideoRef={this.setDualVideoRef} /&gt;
  </code></pre>