Pass data across Screens

Question

I'm a beginner in React, and I'm trying to pass data between screens using props, but doesn't work, here is my code:

Login.jsx: I have a method of how to submit the form, and get the data from the API and verify if It's true, then navigate to Users page:

handleSubmit = event => {
        var user = this.state.user
        var password = this.state.password
        this.state.users.forEach(users => {
            if ((users.name === user) && (users.password === password)) {
                alert("Login Successful!")
                this.setState(() => ({ 
                    toUser: true,
                    isLogin: true,
                    userId: users.id,
                 }));
            } else {
                alert("Verify the information you have entered!")
            }
        });
    }

render() {
        if (this.state.toUser === true) {
            return <Redirect to='/user' />
        }

    return (
        <div className="Login">
            <h3>USER AREA</h3>
            <form onSubmit={this.handleSubmit}>

                <FormGroup controlId="user" bsSize="large">
                    <ControlLabel>Username</ControlLabel>
                    <FormControl
                        autoFocus
                        type="user"
                        value={this.state.user}
                        onChange={this.handleChange}
                    />
                </FormGroup>
                <FormGroup controlId="password" bsSize="large">
                    <ControlLabel>Password</ControlLabel>
                    <FormControl
                        value={this.state.password}
                        onChange={this.handleChange}
                        type="password" />
                </FormGroup>
                <Button
                    block
                    bsStyle="primary"
                    bsSize="large"
                    disabled={!this.validateForm()}
                    type="submit"
                >
                    LOGIN
                </Button>
            </form>
        </div>
    );
}

User.jsx: I want to receive data from Login to use in Users Page, I tried something like this:

constructor(props) {
        super(props);
        this.state = {
            user: "",
            password: "",
            'users': [],
            toUser: false,
            userId: this.props.userId,
        };
    }

render() {
        return (
            <div className="Login">
                <h3>USER AREA {this.props.userId}</h3>
            </div>
        );
    }

That is the result I want:

Answer 1

What I have done to pass data using history prop,

this.props.history.push({
         pathname:"/user",
         state:{
             userId:"1"
          }
 });

and u can access like this.props.location.state.userId

handleSubmit = event => {
        var user = this.state.user
        var password = this.state.password
        this.state.users.forEach(users => {
            if ((users.name === user) && (users.password === password)) {
                alert("Login Successful!")

             this.props.history.push({
                pathname:"/user",
                state:{
                    userId:users.id
                 }
             });
            } else {
                alert("Verify the information you have entered!")
            }
        });
    }

render() {
      return (
        <div className="Login">
            <h3>USER AREA</h3>
            <form onSubmit={this.handleSubmit}>

                <FormGroup controlId="user" bsSize="large">
                    <ControlLabel>Username</ControlLabel>
                    <FormControl
                        autoFocus
                        type="user"
                        value={this.state.user}
                        onChange={this.handleChange}
                    />
                </FormGroup>
                <FormGroup controlId="password" bsSize="large">
                    <ControlLabel>Password</ControlLabel>
                    <FormControl
                        value={this.state.password}
                        onChange={this.handleChange}
                        type="password" />
                </FormGroup>
                <Button
                    block
                    bsStyle="primary"
                    bsSize="large"
                    disabled={!this.validateForm()}
                    type="submit"
                >
                    LOGIN
                </Button>
            </form>
        </div>
    );
}

Answer 2

In this code you are not actually passing any props to the User component when you are redirecting to /user. For User to access state from Login, you either need to use context api or use a state-management library like redux or mobx.