How to pass data from one component to another component?

Question

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.

score 0 · Accepted Answer · answered Jul 22 '22 at 06:34

0

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 Jul 22 '22 at 06:34

Brother58697

2,290
2
4
12

But the sidebar and login components are not on the same page. When i click the login button, it will route to the next page which contains the sidebar. In this case, how can i pass the response data to the sidebar instead of directly passing the string that i assigned to it? @Brother58697 – manyProblem Jul 22 '22 at 07:55
@manyProblem Ahh, from some research, it looks like the answer could lie in [contexts](https://reactjs.org/docs/context.html) – Brother58697 Jul 22 '22 at 09:53
First time hearing about it. Thanks a lot!!! – manyProblem Jul 24 '22 at 11:49
Anytime! Check out [this](https://stackoverflow.com/questions/70907592/sharing-state-across-react-router-v6-routes-using-context-api) and the actual accepted answer [here](https://stackoverflow.com/questions/50155909/how-to-use-context-api-with-react-router-v4) – Brother58697 Jul 24 '22 at 12:46

How to pass data from one component to another component?

1 Answers1