title: React: How to pass props to child route component
body: <p>So these codes are generated from <code>.NetCore</code> with react template. So I have <code>App.js</code>:</p>
  <pre><code>import { Layout } from './components/Layout';
  import { Home } from './components/home/Home';
  import { FetchData } from './components/home/FetchData';
  import { Counter } from './components/home/Counter';
  
  import './custom.css'
  
  export default class App extends Component {
    static displayName = App.name;
  
    render () {
      return (
        &lt;Layout&gt;
          &lt;Route exact path='/' component={Home} /&gt;
          &lt;Route path='/counter' component={Counter} /&gt;
          &lt;Route path='/fetch-data' component={FetchData} /&gt;
        &lt;/Layout&gt;
      );
    }
  }
  </code></pre>
  <p>Which render the <code>Layout</code>:</p>
  <pre><code>import React, { Component } from 'react';
  import { Container } from 'reactstrap';
  import { NavMenu } from '../navigations/NavMenu';
  import { Login } from './account/Login';
  
  export class Layout extends Component {
      static displayName = Layout.name;
  
      render() {
          return (
              &lt;div&gt;
                  &lt;Login /&gt;
                  &lt;NavMenu /&gt;
                  &lt;Container&gt;
                      {this.props.children}
                  &lt;/Container&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  <p>The <code>Layout</code> renders <code>Login</code>:</p>
  <pre><code>import React, { Component } from 'react';
  import './Login.css';
  
  export class Login extends Component {
      constructor(props) {
          super(props);
          this.state = { show: false };
          this.login = this.login.bind(this);
          this.showLogin = this.showLogin.bind(this);
      }
  
      showLogin() {
          this.setState({
              show: true
          });
      }
  
      login() {
  
      }
  
      render() {
          return (
              &lt;form className={this.state.show ? &quot;login-form &quot; : &quot;login-form hide&quot;} onSubmit={this.login()}&gt;
                  &lt;h1&gt;Login&lt;/h1&gt;
  
                  &lt;div className=&quot;form-group&quot;&gt;
                      &lt;input required type=&quot;text&quot; placeholder=&quot;Email&quot; /&gt;
                      &lt;input required type=&quot;password&quot; placeholder=&quot;Password&quot; /&gt;
                  &lt;/div&gt;
  
                  &lt;button type=&quot;submit&quot; className=&quot;btn btn-primary&quot;&gt;Login&lt;/button&gt;
              &lt;/form&gt;
          );
      }
  }
  </code></pre>
  <p>Then this is one of the child component <code>FetchData</code>:</p>
  <pre><code>import React, { Component } from 'react';
  import { http } from '../../helpers/Http';
  
  export class FetchData extends Component {
      static displayName = FetchData.name;
  
      constructor(props) {
          super(props);
          this.state = { forecasts: [], loading: true };
      }
  
      componentDidMount() {
          this.populateWeatherData();
      }
  
      async populateWeatherData() {
          const data = await http.getData(null, 'WeatherForecast');
          this.setState({ forecasts: data, loading: false });
      }
  
      static renderForecastsTable(forecasts) {
          return (
              &lt;table className='table table-striped' aria-labelledby=&quot;tabelLabel&quot;&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Date&lt;/th&gt;
                          &lt;th&gt;Temp. (C)&lt;/th&gt;
                          &lt;th&gt;Temp. (F)&lt;/th&gt;
                          &lt;th&gt;Summary&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      {forecasts.map(forecast =&gt;
                          &lt;tr key={forecast.Date}&gt;
                              &lt;td&gt;{forecast.Date}&lt;/td&gt;
                              &lt;td&gt;{forecast.TemperatureC}&lt;/td&gt;
                              &lt;td&gt;{forecast.TemperatureF}&lt;/td&gt;
                              &lt;td&gt;{forecast.Summary}&lt;/td&gt;
                          &lt;/tr&gt;
                      )}
                  &lt;/tbody&gt;
              &lt;/table&gt;
          );
      }
  
      render() {
          let contents = this.state.loading
              ? &lt;p&gt;&lt;em&gt;Loading...&lt;/em&gt;&lt;/p&gt;
              : FetchData.renderForecastsTable(this.state.forecasts);
  
          return (
              &lt;div&gt;
                  &lt;h1 id=&quot;tabelLabel&quot; &gt;Weather forecast&lt;/h1&gt;
                  &lt;p&gt;This component demonstrates fetching data from the server.&lt;/p&gt;
                  {contents}
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  <p>I want to access <code>Login</code> from <code>FetchData</code> so whenever the user is not authorized, it calls <code>showLogin()</code> from <code>Login</code> component.</p>
  <p>How do I do this?</p>