title: react dynamically override child render
body: <p>I have the following reactJS component structure</p>
  
  <pre><code>&lt;Parent&gt;
      &lt;Child1/&gt;
  &lt;/Parent&gt;
  &lt;Parent&gt;
      &lt;Child2/&gt;
  &lt;/Parent&gt;
  </code></pre>
  
  <p>the children have a function that performs different API calls.. Until thats finished, the child is not ready to be rendered. So is there a way for me to have the parent display 
  "waiting for data..." 
  and call the method in the child to do the API call</p>
  
  <p>in the child i would like to have a simple render method which does not have to check if the get API call has completed or not</p>
  
  <p>I have tried two approaches but both unsuccessful </p>
  
  <ol>
  <li><p>Try call a method in the child with out rendering it.. React.Children.map(this.props.children, (child)=>child.doAPICall()) but this child does not seem to have its functions available</p></li>
  <li><p>Override the render function dynamically so it renders nothing, then after the children have completed the API calls to swap the render mthod back</p>
  
  <p>React.Children.map(this.props.children, (item, i) =><br>
  (React.cloneElement(item, { 
      render: () => false
    })))
  this will allow me to override props but not the render method</p></li>
  </ol>
  
  <p>Any advice would be greatly appriciated </p>