CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
Molly
Molly

Reputation: 1907

React: reading data passed as parameter in history.push

I am trying to send some data as parameter in history.push.

Basically I am calling a method on a button click and inside the method I am calling an api. If I get success response I redirect to other page and I need to pass some data as well.

Below is my code for that:

class Login extends Component  {
  constructor(props) {
    super(props);
    this.state = {
      enteredName: null,
      enteredPwd: null,
      rescode: null,
      userName: null,
      formatDesc: null,
      userFormat : null,
      success: false,
      responseJson : null,
    };
  }

  state = {
    enteredName: null,
    enteredPwd: null,
    rescode: null,
    userName: null,
    formatDesc: null,
    userFormat : null,
    success: false,
    responseJson : null,
  }

  render = () => {
    return (
      <Router>
        <div id= "login-page">
          <div className="back-image" style={{height:"100vh"}}>
            <div className="container">
              <form className="form-login" action="index.html">
                <h2 className="form-login-heading">sign in now</h2>
                <div className="login-wrap">
                  <label>User ID</label>
                  <input type="text" ref="usrname" className="form-control" placeholder="User ID" autofocus/>
                  <br/>
                  <label>Password</label>
                  <input type="password" ref = "password" className="form-control" placeholder="Password"/>
                  <br/>
                  <a  className="btn btn-theme btn-block" onClick={this.login.bind(this)}><i className="fa fa-lock mr-10"/>SIGN IN</a>
                  <Dialog ref={(component) => { this.dialog = component }} />
                </div>
              </form>
            </div>
          </div>
        </div>
      </Router>
    ); 
  }

  login = (e) => {
    e.preventDefault();
  
    fetch('some url', {
      method: 'POST',
      body: JSON.stringify({
        "userId": this.refs.usrname.value,
        "password": this.refs.password.value
      })
    })
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(`response: ` , responseJson)
        if (responseJson.errorCode === '00') {
          this.setState({ rescode: responseJson.errorCode })
          this.setState({ userName: responseJson.userName })
          this.setState({ formatDesc: responseJson.formatDesc });
          this.setState({userFormat : responseJson.userFormat});
          this.setState({success : true});
          this.setState({responseJson: responseJson});
          this.props.history.push(
            '/Taskactive',
            {
              role_id : this.userFormat,
              userName : this.userName
            }
          );
        } else {
          alert("Error Logging in.." + responseJson.errorMsg);
          this.refs.usrname.value = "";
          this.refs.password.value = "";
        }
      })
      .catch((error) => {
        console.error(error);
      });
  
    this.refs.usrname.value = "";
    this.refs.password.value = "";
  }

Everything is fine until now but now I need to read the data passed i.e. role_id and userName to the next page i.e. Taskactive. So how can we read those data in Taskactive.jsx?

Upvotes: 11

Views: 27581

Answers (3)

Molly
Molly

Reputation: 1907

Okay,after struggling for 4 days and twitching around the answers given by Luna and JupiterAmy, here is what worked for me:

inside the Login.jsx

this.props.history.push({
          pathname : '/Taskactive',
          state :{
          role_id : responseJson.userFormat,
          userName : this.userName,
          userid: this.refs.usrname.value
          }
          } 
        );

and in Taskactive.jsx

this.props.location.state.role_id

Hope this could help somebody in future.

Upvotes: 17

Luna
Luna

Reputation: 1178

if its a component rendered with react-router, the stuff passed are inside component props.

console.log(this.props.match.params)

from what I see, your router configuration is wrong. Login should be a child of <Router>, and shouldn't container router at all.

Example config: 

<Router>
  <Switch>
    <Route exact path="/" component={Login} />
    <Route path="/login" component={Login} />
    <Route path="/signup" component={Signup} />
    <Route path="/restore-password" component={RestorePass} />
    <Route path="/forgot-password" component={ForgotPass} />
  </Switch>
</Router>

Upvotes: 0

JupiterAmy
JupiterAmy

Reputation: 384

change this 

this.props.history.push(
          '/Taskactive',
          {
            role_id : this.userFormat,
            userName : this.userName
          }
        );

to this:

this.props.history.push({
          pathname: '/Taskactive',
          appState: {
            role_id : this.userFormat,
            userName : this.userName
          }
        });

And inside the component which you are rendering for path /Taskactive, you can access the values as this.props.location.appState.role_id or this.props.location.appState.userName You can also change the name of Object(which I have kept as state) to your wish.

Hope this helps.

Upvotes: 2

Related Questions