I just don't understand why the user's name that's coming from my endpoint won't show up on the browser on successful auth (when user logs in successfully using their credentials). When the user logs in, I want them to be greeted with a simple Hello, *name* but the *name* won't show up. I'm successfully grabbing the name via console.log(response.data[0].name); so I know the name's definitely coming through based on what I see in the console.
I've tried too many ways to list in order to solve this issue but ran out of options. I know it's something minuscule I'm overlooking but just can't spot what, I just need another pair of eyes to see what's wrong in my code.
How can I solve this?
Here's login component:
import React, { Component } from 'react';
import { Link, Redirect } from "react-router-dom";
import axios from "axios";
import Cookies from 'js-cookie';
class Login extends Component {
constructor(props) {
super(props);
this.state = {
email: '',
password: '',
remember_me: true,
name: '',
logged_in_flag: false,
access_token: null,
auth: false
}
this.emailHandler = this.emailHandler.bind(this);
this.passwordHandler = this.passwordHandler.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
emailHandler(e) {
this.setState({
email: e.target.value,
});
}
passwordHandler(e) {
this.setState({
password: e.target.value,
});
}
handleSubmit(e) {
e.preventDefault();
const user = {
email: this.state.email,
password: this.state.password,
remember_me: this.state.remember_me
}
JSON.stringify(user);
const headers = {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
}
const { history } = this.props;
axios.post('http://127.0.0.1:8000/api/auth/login', user, {headers})
.then(response => {
console.log(response.data[0].name);
console.log(response.data.access_token);
let set_access_token = Cookies.set("access_token", response.data.access_token);
this.setState({
logged_in_flag: true,
name: response.data[0].name,
access_token: set_access_token,
auth: true
});
Cookies.set("access_token", this.state.access_token);
history.push('wall-of-fame');
}).catch(error => {
console.log("AXIOS ERROR!! " + error);
});
}
render() {
const {name, auth} = this.state;
console.log(this.state.name);
console.log(this.state.auth);
if(auth) {
console.log("ARE WE HERE");
return(
<Redirect to={{
pathname: "/wall-of-fame",
state: {name: name}
}} />
);
}
return(
<div id="login">
<div className="container">
<div id="login-row" className="row justify-content-center align-items-center">
<div id="login-column" className="col-md-6">
<div id="login-box" className="col-md-12">
<form id="login-form" className="form" method="post" onSubmit={this.handleSubmit}>
<div className="form-group">
<label htmlFor="email" className="text-info">Email:</label><br/>
<input type="text" name="email" id="email" className="form-control" onChange={this.emailHandler}/>
</div>
<div className="form-group">
<label htmlFor="password" className="text-info">Password:</label><br/>
<input type="password" name="password" id="password" className="form-control" onChange={this.passwordHandler}/>
</div>
<Link to='/wall-of-fame'>
<div className="form-group">
<input type="submit" name="submit" className="btn btn-info btn-md" value="Submit"/>
</div>
</Link>
<Link to="/register">
<div id="register-link" className="text-right">
<a href="#" className="text-info">Register here</a>
</div>
</Link>
</form>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default Login;
Here's Wall component:
import React, { Component } from 'react'
import { withRouter } from "react-router-dom";
class Wall extends Component {
constructor(props) {
super(props);
}
render() {
return(
<h1>Hello, {this.props.name}!</h1>
);
}
}
export default withRouter(Wall);
Here's App component:
import React, {Component} from 'react';
import {Switch, Route, Redirect} from 'react-router-dom';
import Login from './components/Login/Login';
import Wall from './components/Wall/Wall';
import Cookies from 'js-cookie';
class App extends Component {
constructor(props) {
super(props);
this.state = {
auth: false
};
}
componentDidMount() {
// I'm not Unsure if I need to do anything here
if(Cookies.get("access_token") !== null) {
console.log("it's true!");
this.setState({auth: true});
} else {
console.log("it's false");
}
}
render() {
return (
<React.Fragment>
<Switch>
<Route path="/login" component={Login}/>
<Route path="/wall-of-fame" component={Wall}/>
</Switch>
</React.Fragment>
);
}
}
export default App;
