Home / Questions / 353003
Accepted
Cristian Budzicz
Asked: 2020-05-07 11:46:34 +0800 CST 2020-05-07 11:46:34 +0800 CST

React - How to communicate child component with parent, in an Axios call

  • 772

I have a component called app that is responsible for rendering a menu bar with options. One of the options is login .

When the user successfully logs in via request with axios, I am interested in returning a boolean variable that indicates that the login is successful . Following the following tutorial: link I was able to implement the following code that I attach.

The problem is that it is not executing the method in the parent

The following parent app component is implemented:

class App extends React.Component {

constructor(props){
  super(props);
  this.state = ({
     isUserLogin: false
  })

  this.myCallback = this.myCallback.bind(this);
 }

 //funcion ques se ejecutaria cuando se retornen los datos
 myCallback = (dataFromChild) => {
  //  [...we will use the dataFromChild here...]
  alert('soy el padre' + dataFromChild);
 }

 // ref: https://gist.github.com/darklilium/183ce1405788f2aef7e8
 render() {
  return (
    <>
      <BrowserRouter>
        <>
          { (this.state.isLoggedIn) ? null : <NavBar /> }
          {/* <NavBar /> */}
            <div className="container">
              <Switch>
                <Route exact path="/" component={Home} />
                <Route exact path="/login" component={Login} callbackFromParent={this.myCallback}/>
              </Switch>
            </div>
          <PiePagina />
        </>
      </BrowserRouter>
    </>
  );
}
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
 );

In its child called Login I have implemented the following logic (I copy the main part so that it is not extensive):

class Login extends React.Component {

constructor(props){
    super(props);

    this.state = ({
        username:'',
        password:'',
        errors: {},
        errorApi: ''
    })

    this.cambioUsername = this.cambioUsername.bind(this);
    this.cambioPassword = this.cambioPassword.bind(this);
    this.handleSubmit   = this.handleSubmit.bind(this); 
    this.consumirApiLogin = this.consumirApiLogin.bind(this);
    this.validarFormulario = this.validarFormulario.bind(this);
}
consumirApiLogin() {
    const payload={
        "_username":this.state.username,
        "_password":this.state.password,
    }
    axios.post(API_LOGIN, payload)
        .then(response => {
            // console.log(response.data.token);
            // this.setState({errorApi: response.data})
            // console.log(this.state.errorApi);
            sessionStorage.setItem('AccessToken', response.data.token);
            // INTENTO LLAMAR AL METODO DEL PADRE, PERO NO EJECUTA NADA
            // TAMPOCO GENERA UN ERROR EN LA CONSOLA
            this.props.callbackFromParent('hijo');
        })
        .catch(e => {
            if(e.response)
            {
                let error = '';
                error = e.response.data.message;
                this.setState({errorApi: error});
            }
        });
}

If you can guide me, thank you very much!

javascript

2 Answers

  1. Best Answer

    In the declaration of your routes you do not pass the props to the child component correctly.

    If you want to pass data from parent to child in a routed component you can use the render prop which receives an inline function and returns the component to render with the props you indicate.

    You can also pass an inline function to the prop component of <Route />but it is not recommended as it says in the documentation, since it would create a wrapper component on the component to render and the mount and dismount methods would have to be executed.

    For this reason, they recommend using the prop renderthat returns the component to be rendered and not creating an unnecessary wrapper component as it would be done in the prop component.

     <Route 
    exact 
    path="/login" 
    render={() => <Login callbackFromParent={this.myCallback}/>} 
/>
    • 1

  2. It is because you are passing the function to Route and not to Login, you have 2 solutions to solve this:

    1.- The Best:

    <Route exact path="/login" render={() => <Login callbackFromParent={this.myCallback} />}/>

    two.-

    <Route exact path="/login">
    <Login callbackFromParent={this.myCallback} />
</Route>

    In this way the method reaches Login and can be executed correctly.

    • 1