title: Specifying default value for component prop
body: <p>I have a re-usable form component that given a schema submits a set of fields to a backend service. I want to extend it such that I can pass in an optional React component to denote that the form submission was successful. If no component is specified, I want it to render the default.</p>
  <pre><code>import DefaultFormSuccess from './default-form-success';
  
  ...
  
  const GenericFormHelper = formProps =&gt; {
    const {
      form,
      posting,
      postingSuccess,
      successComponent = DefaultFormSuccess,
      ..restFormProps
    } = formProps;
    
    return (
      &lt;div&gt;
        &lt;form {...restFormProps}
          &lt;fieldset&gt;
           // Fields go here
          &lt;fieldset&gt;
        &lt;/form&gt;
       {postingSuccess &amp;&amp; successComponent}
      &lt;/div&gt;
    );
  </code></pre>
  <p>I have a generic default component which looks like this :-</p>
  <pre><code>const DefaultFormSuccess = () =&gt; {
    return (
      &lt;p&gt;Form Submission Successful!&lt;/p&gt;
    );
  
  export default DefaultFormSuccess;
  </code></pre>
  <p>If I define a custom success component like this</p>
  <pre><code>const CustomSuccess = () =&gt; {
    return (
      &lt;p&gt;Thanks! We'll get back to you within 24 hours&lt;/p&gt;
    );
  
  </code></pre>
  <p>and call my form passing in my custom success component it works</p>
  <pre><code>  &lt;GenericFormHelper successComponent={&lt;CustomSuccess /&gt;} /&gt;
  </code></pre>
  <p>but just calling</p>
  <pre><code>&lt;GenericFormHelper /&gt;
  </code></pre>
  <p>results in a console error <code>functions are not valid as a React child</code></p>
  <p>modifying the line</p>
  <pre><code>postingFailure &amp;&amp; failureComponent
  </code></pre>
  <p>to</p>
  <pre><code>postingFailure &amp;&amp; failureComponent()
  </code></pre>
  <p>works when no component is passed in but fails when I do pass the component in with <code>failureComponent is not a function</code>.</p>
  <p>So my question is, how can I get it to work for both scenarios?</p>