title: React: How to pass an argument to a parent component
body: <p>So I have a parent component that acts like a router to all the components in my app.</p>
  
  <p>In my child <code>Login</code> component, it generates a <code>token</code> if user successfully sign in, and I want this <code>token</code> to be passed to the parent component so that it can direct the user to the dashboard, with the <code>token</code> passed to that <code>Dashboard</code> component.</p>
  
  <p>My <code>Login</code>'s sign-in handling part:</p>
  
  <pre><code>//...
  handleSubmit = event =&gt; {
      event.preventDefault();
  
      let username = this.state.username;
      let password = this.state.password;
  
      SignInAndGetToken(username, password)
        .then(response =&gt; {
          if (response.data["code"] === 200) {
            let newToken = response.data["token"];
            console.log("token = " + newToken);
  
            console.log("submitting with username: " + username + " pwd: " + password);
            this.props.newLogin(newToken, username)
          }
        })
        .catch(function (error) {
          console.log(error);
        })
    };
  // ...
  
  // SignInHandler.js
  export const SignInAndGetToken = (username, password) =&gt;
    Axios.post(LoginPath, {
      "username": username,
      "password": password
    });
  </code></pre>
  
  <p>Parent component (<code>App.js</code>) :</p>
  
  <pre><code>import React, {Component} from 'react';
  import {Route, Switch} from "react-router";
  import Home from "./components/Home";
  import MyNavbar from "./components/MyNavbar";
  import Register from "./components/auth/Register";
  import Dashboard from "./components/dashboard/Dashboard";
  import Login from "./components/auth/Login";
  
  class App extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        token: "",
        username: ""
      }
    }
  
    newLogin(token, username) {
      this.setState({
        token: token,
        username: username
      })
    }
  
    render() {
      return (
        &lt;React.Fragment&gt;
          &lt;MyNavbar/&gt;
          &lt;Switch&gt;
            &lt;Route exact path="/" component={Home}/&gt;
            &lt;Route path="/login" component={Login}/&gt;
            &lt;Route exact path="/register" component={Register}/&gt;
  
            &lt;Route path="/dashboard"
                   render={(props) =&gt;
                     &lt;Dashboard {...props}
                                token={this.state.token}
                                username={this.state.username}/&gt;
                   }
            /&gt;
          &lt;/Switch&gt;
        &lt;/React.Fragment&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>I've read <a href="https://medium.com/@kyledavelaar/updating-parent-component-state-from-children-components-in-react-2ead9b9cec9f" rel="nofollow noreferrer">this example</a>, but it's parent function doesn't take any parameter.</p>
  
  <p>Is there a way to call that <code>newLogin(token, username)</code> method from the <code>Login</code> component? Or is this logic wrong?</p>