[FIXED] How to pass data from one component to another component?

Issue

I have two js files, including login and sidebar.

In the login.js(class component), it will call the loginAction to perform an API call and get back response data(id, role, username).

  import LoginAction from auth.js
  ...
  handleSubmit(event) {
    event.preventDefault();   
    var response = LoginAction(this.state)
  }

LoginAction is in the auth.js

export function LoginAction(data) {
    const loginName = data.loginName;
    const password = data.password;

    var response = Login(loginName, password).then(response => {
        if (response.data.errorCode === "") {
            sessionStorage.setItem("token", response.data.data.token)
            return {passwordError: null, loginNameError: null, isLoggedOn: true, role: response.data.data.isAdmin};
        } else {
            return formatError(response.data);
        }
    })
    return response;
};

Here is the Login which is in the authservice.js

export const Login = (loginName, password) => {
    const postData = { loginName, password }
    console.log(postData);

    return Axios.post("http://localhost:8080/login", postData, header);
}

how to pass the response to sidebar.js(class component)? I want to display the user's role on the sidebar.

if (data.isLoggedOn) {
        console.log("routing to /employee")
        this.props.router.navigate("/employee", { state: { "id": id, "role": role } })
      }

I have tried to use the state to pass the data, but the role cannot be loaded to the sidebar after the first loading. The role only displays when I load the sidebar page again.

Solution

You can create a state in a common parent component and pass down a function that sets that state. Here's a quick example where I define a state user in the App and define login() which sets its state. Then I pass login() as a prop to the login button, and pass user as a prop to the sidebar. CodeSandbox

import React, { Component } from "react";

export default class App extends Component {
  constructor(){
    super();
    this.state = {user: null}
  }

  login(user) {
    this.setState({user})
  }

  render() {
    return (
      <div className="App">
      <Login loginHandler={(user)=>this.login(user)}/>
      <Sidebar user={this.state.user}/>
    </div>
  );
}
}

class Sidebar extends Component{
    render(){
      return(
        <div className="sidebar">Hey {this.props.user}</div>
      )
    }
} 

class Login extends Component{
  render(){
    return(
      <button onClick={()=>this.props.loginHandler('Foo')}>Login</button>
    )
  }
}

Answered By - Brother58697

Answer Checked By - Pedro (PHPFixing Volunteer)