PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Thursday, October 13, 2022

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

 October 13, 2022     axios, javascript, reactjs     No comments   

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)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing