I'm new in React and just manage to make to login and registration page with JWT and MySQL, but now I would like the name of the user to appear when the user is logged in. Can someone help me? I shared my login and register component. I thought that I could that by adding something like
Welcome{props.name}
on a different component but it's not working.import React, { Component } from 'react'; import './Login.css'; import axios from 'axios'; import {Link} from "react-router-dom"; export default class Login extends Component { constructor(props) { super(props); this.state = { email: "", password: "", } } handleChange = (e) => { this.setState({ [e.target.name]: e.target.value }) } login = () => { const { email, password} = this.state; axios("/users/login", { method: "POST", data:{ email, password, } }).then(response => { localStorage.setItem('token', response.data.token); this.props.history.push("/track"); console.log(response.data) }).catch(error => { console.log(error) }) } render() { return ( <div> <div className="login-container"> <input className="mb-3" type="text" name="email" value={this.state.email} placeholder="Email" onChange={this.handleChange} /><br></br> <input className="mb-3" type="password" name="password" value={this.state.password} placeholder="Password" onChange={this.handleChange} /><br></br> <button className="login-button" onClick={this.login }>Sign in</button> <p className="text-white mt-2">Not a member? <Link to="/register" className="text-black">Register</Link></p> </div> </div> ) } }
import React, { Component } from 'react' export default class Register extends Component { constructor(props) { super(props); this.state = { users: [], name: "", email: "", password: "", confirmpassword : "" } } componentDidMount() { this.getUsers(); } getUsers = () => { fetch(`users`) .then((response) => response.json()) .then((response) => { this.setState({ users: response }) }) } addUsers = () => { const { name, email, password, confirmpassword } = this.state; fetch(`/users`, { method: "POST", headers: { "Content-type": "application/json", }, body: JSON.stringify({name, email, password, confirmpassword}), }) .then((response) => response.json()) .then(response => console.log(response.msg)) this.props.history.push("/login"); } handleInput = (e) => { const { value, name } = e.target; this.setState({ [name]: value, }); } render() { const {name, email, password, confirmpassword} = this.state; return ( <div> <div className="cover d-flex justify-content-center align-items-center"> <div className="text-center login-container"> <input className="mb-3" type="text" placeholder="Full name" name="name" value={name} onChange={this.handleInput} /><br></br> <input className="mb-3" type="text" placeholder="Email" name="email" value={email} onChange={this.handleInput} /><br></br> <input className="mb-3" type="password" placeholder="Password" name="password" value={password} onChange={this.handleInput}/><br></br> <input className="mb-3" type="password" placeholder="Confirm Password" name="confirmpassword" value={confirmpassword} onChange={this.handleInput}/><br></br> <button className="signup-button" onClick={this.addUsers}>Sign up</button> </div> </div> </div> ) } }
没有评论:
发表评论