title: How to pass a prop to {children} in React?
body: <p>I have a Parent component that acts as a wrapper to its children. How do I pass a prop to a child that will be rendered using the format below?</p>
  <pre><code>import React, { useEffect, useState } from 'react';
  
  const Parent = ({ children }) =&gt; {
    const [completeState, setCompleteState] = useState(false);
  
    useEffect(
      () =&gt; {
        /* .. code that runs then sets completeState to true */
      setCompleteState(true);
       }, []
    );
  
    return (
       &lt;section&gt;
         /* 
            how to pass a 'didComplete' prop to children?
             didComplete={completeState}
         */
         {children} // Child component below would be rendered here with the didComplete prop passed in
      &lt;/section&gt;
  
    )
  }
  </code></pre>
  <pre><code>import React from 'react';
  
  const Child = ({ didComplete }) =&gt; (&lt;h1&gt;The function completed? {didComplete}&lt;/h1&gt;); 
  </code></pre>