title: Pass Props to this.props.children
body: <p>I am new to React and I'm having an issue with passing custom props to <code>this.props.children</code>. I have tried <code>React.cloneElement</code> and I can see the prop when I do a console.log in the class I created it but it gets lost when I try to past it. I don't know if maybe <code>React-Router-Dom</code> is doing something to cause the prop to not get passed.  any help would be greatly appreciated.</p>
  
  <p>I started this project using <code>Create-React-App</code> from GitHub. I have the following software installed. </p>
  
  <pre><code>"react": "^16.3.2",
  "react-dom": "^16.3.2",
  "react-redux": "^5.0.6",
  "react-router-dom": "^4.2.2",
  "react-scripts": "1.1.4",
  "redux": "^3.7.2",
  </code></pre>
  
  <p>in App.js </p>
  
  <pre><code>render() {
   return (
    &lt;Provider store={store}&gt;
      &lt;BrowserRouter&gt; 
      &lt;Switch&gt;
        &lt;Route exact path="/" component={LoginPage} /&gt;
        &lt;Route path="/Login" component={LoginPage} /&gt;
        &lt;RootPage&gt;
          &lt;Route path="/TestPage" component={testPage} /&gt;
        &lt;/RootPage&gt; 
      &lt;/Switch&gt;
     &lt;/BrowserRouter&gt;
    &lt;/Provider&gt;
   );
  }
  </code></pre>
  
  <p>in RootPage.js (Parent)</p>
  
  <pre><code>render() {
      const { classes, theme, children } = this.props;
  
      var childrenWithProps = React.Children.map(children, child =&gt; React.cloneElement(child, { doSomething: "Test String" }));
  
      console.log(childrenWithProps)
      return (
          &lt;div&gt;
             {childrenWithProps}
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>With the <code>console.log</code> above in <code>RootPage.js</code> I can see the prop "doSomething".</p>
  
  <p>in TestPage.js (Child)</p>
  
  <pre><code>render(){
      const { classes, theme } = this.props;
  
      console.log(this.props)
  
      return (
          &lt;div&gt; 
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>in the above <code>console.log</code> in TestPage.js I dont see "doSomething" prop I passed. </p>
  
  <p>Thank you for any help.</p>