title: How to pass extra property to a children element in a reactjs?
body: <p>This is my goal. I want to create a composite component which will check the validity of the matched url before showing the <code>children</code> element.  Otherwise it return a common component to show an error message.</p>
  
  <p>So here is my code of my 'decorator':</p>
  
  <pre><code>const EnforceUrlValidation = (test, children) =&gt; {
    const fn = ({ match }) =&gt; {
      if (! test( match )) {
        return ( &lt;InvalidUrlContainer /&gt; );
      }
      return ({children});
    }
    return fn;
  }
  </code></pre>
  
  <p>It is how it is used in my router:</p>
  
  <pre><code>const WelcomePage = EnforceUrlValidation(
      (match) =&gt; {
        const articleId = match.params.articleId;
        return articleId &amp;&amp; isValidarticleId(articleId);
      }
    , &lt;WelcomeContainer/&gt;
  )
  ...
  &lt;Routers&gt;
       &lt;Switch&gt;
            &lt;Route
                path="/:articleId"
                component={WelcomePage}
             /&gt;
  ...
  
  &lt;/Routers&gt;
  </code></pre>
  
  <p>The problem I have now is that I still want to pass the <code>match</code> object into the <code>children</code> inside <code>EnforceUrlValidation</code>. How can I achieve that?</p>
  
  <p><strong>Attempt 1</strong>:</p>
  
  <pre><code>const EnforceUrlValidation = (test, children) =&gt; {
    const fn = ({ match }) =&gt; {
      if (! test( match )) {
        return ( &lt;InvalidUrlContainer /&gt; );
      }
      return (&lt;children match={match} /&gt;);
    }
    return fn;
  }
  </code></pre>
  
  <p>The <code>children</code> is not rendered in this case.</p>
  
  <p><strong>Attempt 2</strong>:</p>
  
  <pre><code>const EnforceUrlValidation = (test, children) =&gt; {
    const fn = ({ match }) =&gt; {
      if (! test( match )) {
        return ( &lt;InvalidUrlContainer /&gt; );
      }
      return (
        &lt;div match={match} &gt;{children} &lt;/div&gt;
      )
    }
    return fn;
  }
  </code></pre>
  
  <p>It fails because <code>div</code> does not support <code>match</code> </p>