title: React: Passing data between components using Router in App.js(parent component)
body: <p>I am trying to self-learn React using it on the front-end while using Laravel framework on the back-end. My goal at this point is to have a user Register through a form(which work just fine).</p>
  <p>On the front-end, there are two components relative to this question, the parent component App.js where my '/' route is loaded automatically and all the other routes are called with react router like this:</p>
  <p>`</p>
  <pre><code>&lt;BrowserRouter&gt;
          &lt;div&gt;
              {this.state.data_username}
          &lt;/div&gt;
              &lt;Header /&gt;
              
              &lt;Footer /&gt;
  
              &lt;Switch&gt;
                  &lt;Route exact path='/' component={Intro} /&gt;
                  &lt;Route path='/register' component={Register} /&gt;
                  &lt;Route path='/login' component={Login}/&gt;
                  &lt;Route path='/userpage' component={Userpage}/&gt;
                  &lt;Route path='/science' component={Science}/&gt;
                  &lt;Route path='/literature' component={Literature}/&gt;
  
              &lt;/Switch&gt;
  
  
          &lt;/BrowserRouter&gt;
  </code></pre>
  <p>`</p>
  <p>Then there is a child component Register.js where I am making an axios post call to register the user.</p>
  <p>Goal: When the user gets registered, I want to pass the username(which the code gets successfully since I have it showing up in console) to the parent component and then down to the Header component, so I can render it on screen.</p>
  <p>My understanding is that I am to make a callback from the parent component to the child, passing somehow a function or an object to the child, assign the value I need inside the children and the pass it down to the Header.</p>
  <p>What I tried was:</p>
  <pre><code>&lt;Route path='/register'  render={props=&gt;(&lt;&gt;&lt;Register    {...callbackFromParents}/&gt;&lt;/&gt;)}
  </code></pre>
  <p>but this did not work.
  But, most of the examples I have seen don't use the react-router for handling routes; in the cases they do, I cannot replicate the render method correctly in the Route code.</p>
  <p>Here is my code:</p>
  <pre><code>import React, {Component} from 'react'
                      import ReactDOM from 'react-dom'
                      import {BrowserRouter, Route, Switch } from 'react-router-dom'
                      // import {Link} from 'react-router-dom'
                      import Header from './Header'
                      import Intro from './Intro'
                      import Register from './Register'
                      import Login from './Login'
                      import Userpage from './Userpage'
                      import Footer from './Footer'
                      import Science from './Science'
                      import Literature from './Literature'
  
  
  
  
                      class App extends Component {
  
                          constructor(props){
                              super(props);
                              this.state={
                                  data_username:'Username'
                              }
  
                              this.username_Callback=this.username_Callback.bind(this)
  
  
  
                          }
  
                          username_Callback(usernamecallback){
                          this.setState({data_username:usernamecallback});
  
                      }
  
  
  
                          // username_attend(){
                          //     var username=data_username;
                          // }
  
                      // render={props=&gt;(&lt;&gt;&lt;Register {...callbackFromParents}/&gt;&lt;/&gt;)}
  
  
  
                          render(){
                              return(
  
  
                                  &lt;BrowserRouter&gt;
                                  &lt;div&gt;
                                      {this.state.data_username}
                                  &lt;/div&gt;
                                      &lt;Header /&gt;
                                      
                                      &lt;Footer /&gt;
  
                                      &lt;Switch&gt;
                                          &lt;Route exact path='/' component={Intro} /&gt;
                                          &lt;Route path='/register' component={Register} /&gt;
                                          &lt;Route path='/login' component={Login}/&gt;
                                          &lt;Route path='/userpage' component={Userpage}/&gt;
                                          &lt;Route path='/science' component={Science}/&gt;
                                          &lt;Route path='/literature' component={Literature}/&gt;
  
                                      &lt;/Switch&gt;
  
  
                                  &lt;/BrowserRouter&gt;
  
  
  
  
                                  )
                          }
                      }
  
                      ReactDOM.render(&lt;App /&gt;, document.getElementById('app'))
  </code></pre>
  <p>and the Register.js :</p>
  <pre><code>import React, {Component} from 'react'
      // import {Link} from 'react-router-dom'
      import axios from 'axios'
  
  
      class Register extends Component{
          constructor(props){
              super(props)
              this.state={
                  name: '',
                  email:'',
                  password:'',
                  errors:[]
              }
  
                  this.handleFieldChange = this.handleFieldChange.bind(this)
              this.handleCreateNewUser = this.handleCreateNewUser.bind(this)
              this.hasErrorFor = this.hasErrorFor.bind(this)
              this.renderErrorFor = this.renderErrorFor.bind(this)
              
  
          }
  
  
      handleFieldChange(event) {
          this.setState({
            [event.target.name]: event.target.value
          })
      }
  
      handleCreateNewUser(event) {
              event.preventDefault()
  
              const { history } = this.props
  
              const user = {
                name: this.state.name,
                email: this.state.email,
                password: this.state.password
  
              }
  
              axios.post('/api/register', user)
                .then(response =&gt; {
                  console.log('Success',response.data.flag)
                  console.log('Success',response.data.username)
                  this.props.callbackFromParent(response.data.username)
                  // redirect to the homepage
                  history.push('/')
                })
                .catch(error =&gt; {
                  this.setState({
                    errors: error.response.data.errors
                  })
                })
            }
  
  
  
  
      hasErrorFor(field) {
              return !!this.state.errors[field]
            }
  
      renderErrorFor(field) {
          if (this.hasErrorFor(field)) {
            return (
              &lt;span className='invalid-feedback'&gt;
                &lt;strong&gt;{this.state.errors[field][0]}&lt;/strong&gt;
              &lt;/span&gt;
            )
          }
      }
  
  
  
      render(){
  
          return (
  
      &lt;div className='container py-4'&gt;
            &lt;div className='row justify-content-center'&gt;
              &lt;div className='col-md-6'&gt;
                &lt;div className='card'&gt;
                  &lt;div className='card-header'&gt;Create new account&lt;/div&gt;
                  &lt;div className='card-body'&gt;
                    
                    &lt;form onSubmit={this.handleCreateNewUser} &gt;
                      
                      &lt;div className='form-group'&gt;
                        &lt;label htmlFor='name'&gt;User Name&lt;/label&gt;
                        &lt;input
                          id='name'
                          className={`form-control ${this.hasErrorFor('name') ? 'is-invalid' : ''}`}
                          name='name'
                          value={this.state.name}
                          onChange={this.handleFieldChange}
                        /&gt;
                      &lt;/div&gt;
  
                      &lt;div className='form-group'&gt;
                        &lt;label htmlFor='description'&gt;Email&lt;/label&gt;
                        &lt;input
                          id='email'
                          className={`form-control ${this.hasErrorFor('email') ? 'is-invalid' : ''}`} 
                          name='email'
                          value={this.state.email}
                          onChange={this.handleFieldChange}
                        /&gt;
                      &lt;/div&gt;
  
                      &lt;div className='form-group'&gt;
                        &lt;label htmlFor='description'&gt;Password&lt;/label&gt;
                        &lt;input
                          id='password'
                          className={`form-control ${this.hasErrorFor('password') ? 'is-invalid' : ''}`}
                          name='password'
                          value={this.state.password}
                          onChange={this.handleFieldChange}
                        /&gt;
                      &lt;/div&gt;
  
                      &lt;button type='submit' className='btn btn-primary'&gt;Register&lt;/button&gt;
                    &lt;/form&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;  
          
          )
        }
      }
      export default Register
  </code></pre>
  <p>I get that I probably make some starter mistake but this problem has been bothering me for some time.</p>