title: How to pass React Component prop to child function using {children}?
body: <p>I'm new to React so this may be something obvious but I can't pass through a prop to a function that creates Components from its parent.  </p>
  
  <p>I can pass props to child components, but the same doesn't work for functions.</p>
  
  <p>I have <code>&lt;Subscription&gt;</code> which I can pass through arguments like so, from its parent <code>post</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;Subscription auth={auth} stripeAmount={post.amount} stripePlanId={post.planid}/&gt;
  </code></pre>
  
  <p>This creates a Stripe subscription.  I want to limit the subscription to subscribe to the <code>stripePlanId</code> which I do so via:</p>
  
  <pre class="lang-js prettyprint-override"><code>class Subscription extends React.Component {
  
    // https://stripe.com/docs/checkout#integration-custom
    componentDidMount() {
      this.stripeCheckout = window.StripeCheckout.configure({
        ...etc...
        email: this.props.auth.email,
      })
    }
  
    newSubscription = () =&gt; {
      var stripePlanId = this.props.stripePlanId;
      this.stripeCheckout.open({
        amount: this.props.stripeAmount, // in cents
        description: this.props.stripePlanId,
        token: function(token){
          createSubscription(token, stripePlanId)
        }
      })
    }
  
   ..etc..
  
  </code></pre>
  
  <p>This works great.  But now to pass through the stripePlanId I can't find out how to pass the <code>stripePlanId</code> through since it renders via a function - this <code>{children}</code> argument seems to only pass in the function, and attempting to add arguments causes errors that they are not functions it expects to act upon the arguments passed:</p>
  
  <pre class="lang-js prettyprint-override"><code>const FireflySubscription = ({children}) =&gt; (
    &lt;FirebaseAuth&gt;
      { ({isLoading, error, auth}) =&gt; {
        if (error || isLoading || !auth) {
          //it pushes these arguments to the parent function
          return children({ 
            error,
            isLoading,
            subscription: null,
          })
        }
  
        // the issue - how to populate this?
        const stripePlanId = ""  
  
        // when working this should return the subscription for only this planId
        if (stripePlanId) {
          return &lt;FirestoreCollection
          path="subscriptions"
          filter={[['createdBy', '==', auth.uid], ['stripePlanId','==', stripePlanId]]}
        &gt;
          { ({error, isLoading, data}) =&gt; {
            return children({
              error,
              isLoading,
              subscription: data.length &gt; 0 ? data : null,
            })
          }}
        &lt;/FirestoreCollection&gt;
  
        }
  
        return &lt;FirestoreCollection
          path="subscriptions"
          filter={['createdBy', '==', auth.uid]}
        &gt;
          { ({error, isLoading, data}) =&gt; {
            return children({
              error,
              isLoading,
              subscription: data.length &gt; 0 ? data : null,
            })
          }}
        &lt;/FirestoreCollection&gt;
  
      }}
    &lt;/FirebaseAuth&gt;
  )
  
  export default FireflySubscription
  </code></pre>
  
  <p>I have tried to pass it through with another method, but the "scope" does not pass through:</p>
  
  <pre class="lang-js prettyprint-override"><code>getPostSubscriptions = stripePlanId =&gt; {
      return &lt;FireflySubscription&gt;
  // it gets these arguments from FireflySubscription function above
      { ({error, isLoading, subscription}) =&gt; { 
        if (error) {
          return &lt;Error error={error} /&gt;
        }
  
        if (isLoading) {
          return &lt;p&gt;loading...&lt;/p&gt;
        }
  
        if (!subscription) {
          return &lt;div&gt;
            &lt;p&gt;&lt;strong&gt;Subscribe to get paid features&lt;/strong&gt;&lt;/p&gt;
            ..etc...
          &lt;/div&gt;
        }
  
        ..etc...
  
      }}
    &lt;/FireflySubscription&gt;
    }
  
    render() {
      return this.getPostSubscriptions(this.props.stripePlanId)
    }
  }
  </code></pre>
  
  <p>Any clue most appreciated!  The original code I'm adapting is from <a href="https://github.com/sampl/firefly" rel="nofollow noreferrer">https://github.com/sampl/firefly</a> if that helps.</p>