Node.js React JWT Login - node.js

Question

It's ok, I got my Token on Node.js, I tested with Postman.
But I want to recuperate my Token in React with localStorage.
I don't understand why, but it doesn't work.
Browser toolbox says "TypeError: this is undefined".
When I try with "bind", browser say nothing. No error but
my localStorage is empty.
For the second case, PreventDefault() doesn't work, i replaced it by persist().
Login.js
class Login extends Component {
state = {
email:"",
password:"",
}
async postLogin(e){
await this.setState({
[e.target.name]: e.target.value
})
e.preventDefault(e);
const login = {
email:this.state.email,
password:this.state.password
};
await axios.post("http://localhost:7777/api/users/login", login)
.then((response) => {
const {token} = response.data;
localStorage.setItem("token", token)
this.props.history.push("/articles")
})
.catch((error) => {
console.log(error);
})
}
render(){
return(
<div className="containerSign">
<h1>Connecte toi</h1>
<form onSubmit={this.postLogin}>
<input className="inputFormSign" type="email" placeholder="Email"/>
<input className="inputFormSign" type="password" placeholder="Mot de passe"/>
<button className="btnFormSign" type="submit">Envoyer</button>
</form>
</div>
)
}
}
export default Login;
Login.js with bind
postLogin = this.postLogin.bind(this);
async postLogin(e){
await this.setState({
[e.target.name]: e.target.value
})
e.persist(e);
const login = {
email:this.state.email,
password:this.state.password
};
await axios.post("http://localhost:7777/api/users/login", login)
.then((response) => {
const {token} = response.data;
localStorage.setItem("token", token)
this.props.history.push("/articles")
})
.catch((error) => {
console.log(error);
})
}
render(){
return(
<div className="containerSign">
<h1>Connecte toi</h1>
<form onSubmit={this.postLogin}>
<input className="inputFormSign" type="email" placeholder="Email"/>
<input className="inputFormSign" type="password" placeholder="Mot de passe"/>
<button className="btnFormSign" type="submit">Envoyer</button>
</form>
</div>
)
}
}
export default Login;

Answer 1

You should use autobind decorator package to eradicate this issue!
Installation:
npm install --save autobind-decorator
Examples:
import autobind from 'autobind-decorator';
#autobind
class Component { }
// or
#autobind
method() {
return this.value
}
note:
To use ES7 decorators you must install babel-plugin-transform-decorators

Answer 2

You must bind the method, for example using class property:
async postLogin = (e) => {
...
}