How to pass a prop through history.push() in react? - reactjs

Question

I have a login component that has an email and password to log in. After a successful, I use this.props.history.push('/userComponent) to route a another component. At the component where it is routed should display the name of the person/user. I am trying to send as a prop but I end up getting undefined as the user component (the component to which it is routed) is not rendered. Please check the below.
export default class Login extends Component {
constructor(props) {
super(props);
this.x = '';
}
onSubmit = () => {
fetch('http://localhost:5000/api/account/')
.then(res => res.json())
.then(data => {
for (let index = 0; index < data.length; index++) {
if (userName === data[index].email && passWord === data[index].password && data[index].role === "Admin") {
console.log("login is successful");
this.x = true;
console.log('.......state after update: ' + this.x);
this.props.history.push('/userA');
return (
<div>
<UserA somePropName={data[index].userName} />
</div>
);
}
else if (userName === data[index].email && passWord === data[index].password) {
console.log("login is successful");
this.x = false;
console.log("x....... " + this.x);
this.props.history.push('/userB');
return (
<UserB somePropName={data[index].userName} />
);
}
else {
this.props.history.push('/errorPage');
}
}
});
}
render() {
return (
<div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required />
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required />
<button type="submit" onClick={this.onSubmit}>Login </button>
<label>
<input type="checkbox" checked="checked" name="remember" /> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot password?</span>
</div>
</div>
);
}
}

Answer 1

The way you can pass properties to other component while navigation
this.props.history.push({
pathname: '/userB',
state: { title: 'Hello world' }
})
using Link
<Link to={{
pathname: '/userB',
state: { title: 'Hello...' }
}}>Click</Link>
Access like this in navigated component
this.props.location.state.title

Answer 2

You should render conditionally UserA or UserB in render(). Place the user related fields in the state. Something like
render() {
return (
<div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required />
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required />
<button type="submit" onClick={this.onSubmit}>Login </button>
<label>
<input type="checkbox" checked="checked" name="remember" /> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot password?</span>
</div>
{this.state.isLoggedIn && this.state.isAdmin && <UserA somePropName={this.state.userName} />}
{this.state.isLoggedIn && !this.state.isAdmin && <UserB somePropName={this.state.userName} />}
</div>);
}
For the onSubmit func
onSubmit = () => {
fetch('http://localhost:5000/api/account/')
.then(res => res.json())
.then(data => {
this.props.history.push('/xxx');
this.setState({
isAdmin: data[index].role === "Admin"
isLoggedIn: userName === data[index].email && passWord === data[index].password,
userName: data[index].userName
})
})
}