React Requests with Router in function - reactjs

Question

Hi I am working on using react router after a request post and am having some problems.
handleSubmit = event => {
event.preventDefault();
request.post(
{
url: 'http://localhost:8080/usernamepassword',
json: true,
body: {
email: this.state.email,
password: this.state.password
}
},
function(err, httpResponse, body) {
console.log(err);
console.log(httpResponse);
console.log(body);
if (err) {
this.props.history.push('/nosuccess');
} else {
this.props.history.push('/success');
}
}
);
The problem is with
if (err) {
this.props.history.push('/nosuccess');
} else {
this.props.history.push('/success');
}
I know (atleast i think) that the problem is with the this.props is not being passed through.
The full code is below. I am working on putting the request into an arrow function (from #webdevdani). Learning that right now.
import React, {Component} from 'react';
import request from 'request';
import {Link, withRouter} from 'react-router-dom';
import '../Form.css';
class SignIn extends Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: ''
};
}
handleChange = event => {
this.setState({
[event.target.id]: event.target.value
});
};
handleSubmit = event => {
event.preventDefault();
request.post(
{
url: 'http://localhost:8080/signin',
json: true,
body: {
username: this.state.username,
password: this.state.password
}
},
function (err, httpResponse, body) {
console.log(err);
console.log(httpResponse);
console.log(body);
if (err) {
this.props.history.push('/nosuccess');
} else {
this.props.history.push('/success');
}
}
);
};
render() {
return (
<div>
<form id="login" className="form-content" onSubmit={this.handleSubmit}>
<h1 className="form-content-text-h1"> Sign In</h1>
<div className="padding10">
<div className="form-content-text-textbox"> EDIPI (DoD ID):</div>
<input type="text" className="input1" id="username" onChange={this.handleChange} required/>
<br/>
<br/>
<div className="form-content-text-textbox"> Password:</div>
<input type="password" className="input1" id="password" onChange={this.handleChange} required/>
</div>
<button type="submit" className="button1">
Sign In
</button>
<br/>
<Link to="/resetpassword" style={{textDecorationColor: '#26c6da'}}>
<h1 className="form-content-link-text">Sign In Assistance</h1>
</Link>
<br/>
<br/>
<h1 className="form-content-text-h1"> New Users </h1>
<Link to="/register">
<button className="button1" type="submit">
Register
</button>
</Link>
</form>
</div>
);
}
}
export default withRouter(SignIn);
Here is the full code.

Answer 1

It looks like the value of 'this' is not what you're expecting. If you change your function declaration in the request.post arguments to be an arrow function, it should have the 'this' value of your component. Then you'll have access to this.props