React: Passing data between components using Router in App.js(parent component)

Question

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).

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:

`


        
            {this.state.data_username}

`

Then there is a child component Register.js where I am making an axios post call to register the user.

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.

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.

What I tried was:

(<>)}

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.

Here is my 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=>(<>)}



                        render(){
                            return(


                                
                                
                                    {this.state.data_username}
                                
                                    
                                    
                                    

                                    
                                        
                                        
                                        
                                        
                                        
                                        

                                    


                                




                                )
                        }
                    }

                    ReactDOM.render(, document.getElementById('app'))

and the Register.js :

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 => {
                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 => {
                this.setState({
                  errors: error.response.data.errors
                })
              })
          }




    hasErrorFor(field) {
            return !!this.state.errors[field]
          }

    renderErrorFor(field) {
        if (this.hasErrorFor(field)) {
          return (
            
              {this.state.errors[field][0]}
            
          )
        }
    }



    render(){

        return (

    
          
            
              
                Create new account
                
                  
                  
                    
                    
                      User Name
                      
                    

                    
                      Email
                      
                    

                    
                      Password
                      
                    

                    
                  
                
              
            
          
          
        
        )
      }
    }
    export default Register

I get that I probably make some starter mistake but this problem has been bothering me for some time.

iwaduarte · Accepted Answer

You are in the right track. In order to pass the function through the Route you should do the following:

and then in the Register.js in the axios response:

//Note the plural and not plural in your code
this.props.callbackFromParents(response.data.username)

React: Passing data between components using Router in App.js(parent component)

Answers (2)

Why care about data storage in your app?

Which options are there?

React context

React Hooks

Redux library

Other state libraries

Related Questions