I am currently working on an e-commerce project using react js. There is a problem of saving/adding user data especially gender( select option). Anyone help to solve this problem.
I use react-select as the component in user from as:
User_form:
This is our user form component that is used for creating users.
import React, { Component, Fragment } from "react";
import { Tabs, TabList, TabPanel, Tab } from "react-tabs";
import PropTypes from "prop-types";
import { register } from "../../redux/actions/auth";
import { createMessage } from "../../redux/actions/message";
import { connect } from "react-redux";
import Select from "react-select";
export class Tabset_user extends Component {
state = {
first_name: "",
last_name: "",
username: "",
email: "",
password: "",
password2: "",
gender: [],
};
static propTypes = {
register: PropTypes.func.isRequired,
isAuthenticated: PropTypes.bool,
};
onSubmit = (e) => {
e.preventDefault();
const {
first_name,
last_name,
username,
email,
password,
password2,
phone,
gender,
} = this.state;
if (password !== password2) {
// this.props.createMessage({ passwordNotMatch: "Passwords do not match" });
alert("Password don't match");
} else {
const newUser = {
first_name,
last_name,
username,
password,
email,
phone,
gender,
};
this.props.register(newUser);
}
};
onChange = (e) => this.setState({ [e.target.name]: e.target.value });
handleChange = (value) => {
this.setState({ gender: value });
};
render() {
const options = [
{ value: "Male", label: "Male" },
{ value: "Female", label: "Female" },
{ value: "Perfer Not To Say", label: "Perfer Not to Say" },
];
const {
first_name,
last_name,
username,
email,
password,
password2,
phone,
} = this.state;
return (
<Fragment>
<Tabs>
<TabList className="nav nav-tabs tab-coupon">
<Tab className="nav-link">Account</Tab>
<Tab className="nav-link">Permission</Tab>
</TabList>
<TabPanel>
<form
className="needs-validation user-add"
onSubmit={this.onSubmit}
>
<h4>Account Details</h4>
<div className="form-group row">
<label className="col-xl-3 col-md-4">First Name</label>
<input
className="form-control col-xl-8 col-md-7"
id="first_name"
type="text"
name="first_name"
value={first_name}
onChange={this.onChange}
placeholder="First Name"
/>
</div>
<div className="form-group row">
<label className="col-xl-3 col-md-4">Last Name</label>
<input
className="form-control col-xl-8 col-md-7"
id="validationCustom1"
type="text"
name="last_name"
value={last_name}
onChange={this.onChange}
placeholder="Last Name"
/>
</div>
<div className="form-group row">
<label className="col-xl-3 col-md-4">
<span>*</span> Email
</label>
<input
className="form-control col-xl-8 col-md-7"
id="email"
type="email"
name="email"
value={email}
onChange={this.onChange}
placeholder="Email Address"
/>
</div>
<div className="form-group row">
<label className="col-xl-3 col-md-4">
<span>*</span> Username
</label>
<input
className="form-control col-xl-8 col-md-7"
id="username"
type="text"
name="username"
value={username}
onChange={this.onChange}
placeholder="Username"
/>
</div>
<div className="form-group row">
<label className="col-xl-3 col-md-4">
<span>*</span> Password
</label>
<input
className="form-control col-xl-8 col-md-7"
id="validationCustom3"
type="password"
name="password"
value={password}
onChange={this.onChange}
placeholder="Password"
/>
</div>
<div className="form-group row">
<label className="col-xl-3 col-md-4">
<span>*</span> Confirm Password
</label>
<input
className="form-control col-xl-8 col-md-7"
id="validationCustom4"
type="password"
name="password2"
value={password2}
onChange={this.onChange}
placeholder="Confirm Password"
/>
</div>
<div className="form-group row">
<label className="col-xl-3 col-md-4">Gender</label>
<Select
className="form-control col-xl-8 col-md-7"
options={options}
value={this.state.gender}
onChange={this.handleChange}
name="gender"
/>
</div>
<div className="form-group row">
<label className="col-xl-3 col-md-4">Phone</label>
<input
className="form-control col-xl-8 col-md-7"
id="phone"
type="number"
name="phone"
value={phone}
onChange={this.onChange}
placeholder="Phone Number"
/>
</div>
<div className="pull-right">
<button type="submit" className="btn btn-primary">
Save
</button>
</div>
</form>
</TabPanel>
</Tabs>
</Fragment>
);
}
}
const mapStateToProps = (state) => ({
isAuthenticated: state.auth.isAuthenticated,
});
export default connect(mapStateToProps, { register, createMessage })(
Tabset_user
);
Action.js:
This is an action creator where I use Axios to call post requests to register the user.
import * as types from "../../constants/actionTypes";
import axiosInstance from "./axios";
// LOGIN USER
export const login = (username, password) => (dispatch) => {
const body = {
username: username,
password: password,
};
axiosInstance
.post("api/token/obtain/", body)
.then((res) => {
console.log(res);
axiosInstance.defaults.headers["Authorization"] =
"JWT " + res.data.access;
dispatch({
type: types.LOGIN_SUCCESS,
payload: res.data,
});
})
.catch((err) => {
console.log(err);
// dispatch(returnErrors(err.response.data, err.response.status));
dispatch({
type: types.LOGIN_FAIL,
});
// alert("Invalid username and Password");
});
};
// REGISTER USER
export const register = ({
first_name,
last_name,
email,
username,
password,
phone,
gender,
}) => (dispatch) => {
// Request Body
// const body = {
// first_name: first_name,
// last_name: last_name,
// email: email,
// username: username,
// password: password,
// };
axiosInstance
.post("/api/user/create/", {
first_name,
last_name,
email,
username,
password,
phone,
gender,
})
.then((res) => {
console.log(res);
dispatch({
type: types.REGISTER_SUCCESS,
payload: res.data,
});
// history.push(`${process.env.PUBLIC_URL}/pages/create-page`);
})
.catch((err) => {
// dispatch(returnErrors(err.response.data, err.response.status));
dispatch({
type: types.REGISTER_FAIL,
});
});
};
//LOGOUT USER
export const logout = () => (dispatch) => {
try {
const response = axiosInstance.post("api/blacklist/", {
refresh_token: localStorage.getItem("refresh"),
});
if (
response
.then((data) => {
if (data.statusText === "Reset Content") {
localStorage.removeItem("access");
localStorage.removeItem("refresh");
axiosInstance.defaults.headers["Authorization"] = null;
dispatch({
type: types.LOGOUT_SUCCESS,
});
}
})
.catch((err) => console.log(err))
);
} catch (e) {
console.log(e);
}
};
Related
I am making a react project and when I am trying to sign up through email and password using firebase authentication then this 👇your text error is showing
This is the error I am getting
This is the whole code:
import React,{useState} from 'react';
import { Link, useNavigate } from 'react-router-dom';
import Layout from '../components/layout/Layout';
import {BsFillEyeFill} from "react-icons/bs";
import { getAuth, createUserWithEmailAndPassword , updateProfile} from "firebase/auth";
import {db} from "../firebase.config"
const SignUp = () => {
// to hide password
const [showPassword, setShowPassword] = useState(false);
const [formData, setFormData] = useState({
email:"",
name: "",
password: "",
})
const {name, email, password} = formData;
const navigate = useNavigate();
const onChange = (e) => {
setFormData((prevState) => ({
...prevState,
[e.target.id]: e.target.value,
}));
};
This is my signUp function
const onSubmitHandler= async (e) =>{
e.preventDefault();
try{
const auth= getAuth()
const userCredential = await createUserWithEmailAndPassword(auth,email,password);
const user = userCredential.user
updateProfile(auth.currentUser,{displayName: name})
navigate("/")
alert("Signup Success")
}catch(error){
console.log(error);
}
}
return (
<Layout>
<div className="d-flex align-items-center justify-content-center w-100 mt-5 mb-5">
<form className='bg-light p-4 rounded-3 border border-dark border-3' onSubmit={onSubmitHandler}>
<h4 className='bg-dark p-2 mt-2 text-light rounded-2 text-center'>Sign Up</h4>
<div className="mb-3">
<label htmlFor="exampleInputEmail1" className="form-label">Enter Name</label>
<input
type="text"
defaultValue={name}
id="name"
onChange={onChange}
className="form-control"
aria-describedby="nameHelp"
/>
</div>
<div className="mb-3">
<label htmlFor="exampleInputEmail1" className="form-label">Email address</label>
<input
type="email"
defaultValue={email}
onChange={onchange}
className="form-control"
id="email"
aria-describedby="emailHelp"
/>
<div id="emailHelp" className="form-text">We'll never share your email with anyone else.</div>
</div>
<div className="mb-3">
<label htmlFor="exampleInputPassword1" className="form-label">Password</label>
<input
type={showPassword? "text" : "password"}
defaultValue={password}
onChange={onchange}
className="form-control"
id="password"
/>
<span >Show Password <BsFillEyeFill
className='text-primary ms-2'
style={{cursor: "pointer"}}
onClick={()=> setShowPassword((prevState)=> !prevState)}
/></span>
</div>
<button
type="submit"
className="btn btn-primary">Sign Up</button>
<div>
<h6>Login with Google</h6>
<span>Already User?</span> <Link to="/signin">Login</Link>
</div>
</form>
</div>
</Layout>
)
}
export default SignUp
After going through firebase documentation I have tried various emails but still it is showing the same error.
This is the email I had been using for signUp.
and I tried different emails as well like: piyush#gmail.com, and my personal email too but still it is showing the same error
This is the error message for your error
auth/invalid-email:
The provided value for the email user property is invalid. It must be a string email address.
Check to make sure your onSubmitHandler is within scope of your formData state, because your email and password might be undefined.
Your code has 2 issues,
1: Check the spelling of onChange on email and password field.
2: Change defaultValue to value
Below is the working code:
import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { BsFillEyeFill } from 'react-icons/bs';
import {
getAuth,
createUserWithEmailAndPassword,
updateProfile,
} from 'firebase/auth';
const Signup = () => {
const [showPassword, setShowPassword] = useState(false);
const [formData, setFormData] = useState({
email: '',
name: '',
password: '',
});
const { name, email, password } = formData;
const navigate = useNavigate();
const onChange = (e: any) => {
setFormData((prevState) => ({
...prevState,
[e.target.id]: e.target.value,
}));
};
const onSubmitHandler = async (e) => {
e.preventDefault();
console.log('email is ', email, password);
try {
const auth = getAuth();
const userCredential = await createUserWithEmailAndPassword(
auth,
email,
password,
);
const user = userCredential.user;
alert('Signup Success');
} catch (error) {
console.log(error);
}
};
return (
<div className="d-flex align-items-center justify-content-center w-100 mt-5 mb-5">
<form
className="bg-light p-4 rounded-3 border border-dark border-3"
onSubmit={onSubmitHandler}
>
<h4 className="bg-dark p-2 mt-2 text-light rounded-2 text-center">
Sign Up
</h4>
<div className="mb-3">
<label htmlFor="exampleInputEmail1" className="form-label">
Enter Name
</label>
<input
type="text"
value={name}
id="name"
onChange={onChange}
className="form-control"
aria-describedby="nameHelp"
/>
</div>
<div className="mb-3">
<label htmlFor="exampleInputEmail1" className="form-label">
Email address
</label>
<input
type="email"
value={email}
onChange={onChange}
className="form-control"
id="email"
aria-describedby="emailHelp"
/>
<div id="emailHelp" className="form-text">
We'll never share your email with anyone else.
</div>
</div>
<div className="mb-3">
<label htmlFor="exampleInputPassword1" className="form-label">
Password
</label>
<input
type={showPassword ? 'text' : 'password'}
value={password}
onChange={onChange}
className="form-control"
id="password"
/>
<span>
Show Password{' '}
<BsFillEyeFill
className="text-primary ms-2"
style={{ cursor: 'pointer' }}
onClick={() => setShowPassword((prevState) => !prevState)}
/>
</span>
</div>
<button type="submit" className="btn btn-primary">
Sign Up
</button>
<div>
<h6>Login with Google</h6>
<span>Already User?</span> <Link to="/signin">Login</Link>
</div>
</form>
</div>
);
};
export default Signup;
app.post('/register', (req, res) => {
const { email, name, password } = req.body;
if (!email || !name || !password) {
return res
.status(400)
.json(
`incorrect form submission ${console.log({ email, name, password })}`
);
}
const hash = bcrypt.hashSync(password);
postgres.transaction((trx) => {
trx
.insert({
hash: hash,
email: email,
})
.into('login')
.returning('email')
.then((loginEmail) => {
return trx('users')
.returning('*')
.insert({
email: loginEmail[0].email,
name: name,
joined: new Date(),
})
.then((user) => {
res.json(user[0]);
})
.then(trx.commit)
.catch(trx.rollback);
})
.catch((err) => res.status(400).json('unable to register'));
});
});
when i enter information into my form it should either return incorrect form submission if anything is missing or continue with the rest of the code but no matter what I put in it always returns with "incorrect form submission" and when i try to console log my req.body objects it returns undefined for all 3
postgres is the name of how i declare my database
import React from 'react';
class Register extends React.Component {
constructor(props) {
super(props);
this.state = {
email: '',
password: '',
name: ''
}
}
onNameChange = (event) => {
this.setState({name: event.target.value})
}
onEmailChange = (event) => {
this.setState({email: event.target.value})
}
onPasswordChange = (event) => {
this.setState({password: event.target.value})
}
onSubmitSignIn = () => {
fetch("https://morning-brushlands-83652.herokuapp.com/register", {
method: 'post',
mode: "no-cors",
headers: {'Content-Type': "application/json"},
body: JSON.stringify({
email: this.state.email,
password: this.state.password,
name: this.state.name
})
})
//.then(response => response.json())
.then(
user => {
if (user.id) {
this.props.loadUser(user)
this.props.onRouteChange('home')
}
}
)
}
render() {
return (
<article className="br3 ba b--black-10 mv4 w-100 w-50-m w-25-l mw6 shadow-5 center">
<main className="pa4 black-80">
<form className="measure">
<fieldset id="sign_up" className="ba b--transparent ph0 mh0">
<legend className="f1 fw6 ph0 mh0">Register</legend>
<div className="mt3">
<label className="db fw6 lh-copy f6" htmlFor="name">Name</label>
<input
className="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
type="text"
name="name"
id="name"
onChange = {this.onNameChange}
/>
</div>
<div className="mt3">
<label className="db fw6 lh-copy f6" htmlFor="email-address">Email</label>
<input
className="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
type="email"
name="email-address"
id="email-address"
onChange = {this.onEmailChange}
/>
</div>
<div className="mv3">
<label className="db fw6 lh-copy f6" htmlFor="password">Password</label>
<input className="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
type="password"
name="password"
id="password"
onChange = {this.onPasswordChange}
/>
</div>
</fieldset>
<div className="">
<input
onClick={this.onSubmitSignIn}
className="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib"
type="button"
value="Register"
/>
</div>
</form>
</main>
</article>
)
}
}
export default Register;
I have a form on the client side in which I send data (username and password) to my DB through a socket event:
CLIENT:
export default function RegisterForm() {
const [user, setUser] = useState("");
const [password, setPassword] = useState("");
const navigate = useNavigate();
const handleSubmit = () => {
socket.emit("newuser", { user, password });
navigate("/");
};
return (
<>
<div className="join-container">
<header className="join-header">
<h1>
<i className="fas fa-smile"></i> Registration Page
</h1>
</header>
<main className="join-main">
<form action="chat.html">
<div className="form-control">
<label htmlFor="username">Username</label>
<input
type="text"
name="username"
id="username"
value={user}
onChange={(e) => setUser(e.target.value)}
placeholder="Set username..."
required
/>
</div>
<div className="form-control">
<label htmlFor="password">Password</label>
<input
type="password"
name="password"
id="pasword"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Set new password..."
required
/>
</div>
</form>
<button type="submit" className="btn" onClick={handleSubmit}>
Submit
</button>
</main>
</div>
</>
);
}
SERVER:
socket.on("newuser", async (msg) => {
try {
Users.create({
username: msg.user,
password: msg.password,
});
} catch (err) {
console.log(err);
}
});
DB MODEL:
const Users = db.define("users", {
username: {
type: DataTypes.STRING,
allowNull: false,
},
password: {
type: DataTypes.STRING,
allowNull: false,
},
});
The problem is that when I submit the password, it stores blanck carachters.
For example If "1234" password is submited, on the DB I see "1234----------"
"-" are blank spaces
What could be the problem?
I'm pulling data from MongoDB and trying to edit the data but for some reason, my form is not showing the values on the form. Can anyone help to guide me on what I am getting wrong? below is my code for any help why form value are not updated using this.state.job_title as an example:
edit-job.component.js
import React, { Component } from "react";
import axios from "axios";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
export default class EditJob extends Component {
constructor(props) {
super(props);
this.onChangeUsername = this.onChangeUsername.bind(this);
this.onChangeJob_title = this.onChangeJob_title.bind(this);
this.onChangejob_comp_image = this.onChangejob_comp_image.bind(this);
this.onChangejob_comp_name = this.onChangejob_comp_name.bind(this);
this.onChangejob_description = this.onChangejob_description.bind(this);
this.onChangejob_location = this.onChangejob_location.bind(this);
this.onChangejob_field = this.onChangejob_field.bind(this);
this.onChangeDatejob_closing_date =
this.onChangeDatejob_closing_date.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.state = {
username: "",
job_title: "",
job_comp_image: "",
job_comp_name: "",
job_description: "",
job_location: "",
job_field: "",
job_closing_date: new Date(),
users: [],
};
}
componentDidMount() {
//GET CURRENT JOB LISTING TO EDIT
if (this.props.match && this.props.match.params.id) {
axios
.get("http://localhost:5001/jobs/" + this.props.match.params.id)
.then((response) => {
console.log(response.data);
this.setState({
username: response.data.username,
job_title: response.data.job_title,
job_comp_image: response.data.job_comp_image,
job_comp_name: response.data.job_comp_name,
job_description: response.data.job_description,
job_location: response.data.job_location,
job_field: response.data.job_field,
job_closing_date: new Date(response.data.job_closing_date),
});
})
.catch(function (error) {
console.log(error);
});
}
axios
.get("http://localhost:5001/users/")
.then((response) => {
if (response.data.length > 0) {
this.setState({
users: response.data.map((user) => user.username),
});
}
})
.catch((error) => {
console.log(error);
});
}
onChangeUsername(e) {
this.setState({
username: e.target.value,
});
}
//Update user with new username entered by user
onChangeJob_title(e) {
this.setState({
job_title: e.target.value,
});
}
onChangejob_comp_image(e) {
this.setState({
job_comp_image: e.target.value,
});
}
onChangejob_comp_name(e) {
this.setState({
job_comp_name: e.target.value,
});
}
onChangejob_description(e) {
this.setState({
job_description: e.target.value,
});
}
onChangejob_location(e) {
this.setState({
job_location: e.target.value,
});
}
onChangejob_field(e) {
this.setState({
job_field: e.target.value,
});
}
onChangeDatejob_closing_date(job_closing_date) {
this.setState({
job_closing_date: job_closing_date,
});
}
onSubmit(e) {
e.preventDefault();
const job = {
username: this.state.username,
job_title: this.state.username,
job_comp_image: this.state.job_comp_image,
job_comp_name: this.state.job_comp_name,
job_description: this.state.job_description,
job_location: this.state.job_location,
job_field: this.state.job_field,
job_closing_date: new Date(),
};
console.log(job);
axios
.post(
"http://localhost:5001/jobs/update/" + this.props.match.params.id,
job
)
.then((res) => console.log(res.data));
window.location = "/";
}
render() {
const Headerstyle = {
marginTop: "40px",
};
return (
<div style={Headerstyle}>
<h3>Edit Exercise Log</h3>
<form onSubmit={this.onSubmit}>
<div className="form-group">
<label>Username: </label>
<select
UseRef="userInput"
required
className="form-control"
value={this.state.username}
onChange={this.onChangeUsername}
>
{this.state.users.map(function (user) {
return (
<option key={user} value={user}>
{user}
</option>
);
})}
</select>
</div>
<div className="form-group">
<label>Job Title: </label>
<input
type="text"
required
className="form-control"
value={this.state.job_title}
onChange={this.onChangeJob_title}
/>
</div>
<div className="form-group">
<label>Company Image: </label>
<input
type="text"
className="form-control"
value={this.state.job_comp_image}
onChange={this.onChangejob_comp_image}
/>
</div>
<div className="form-group">
<label>Company Name: </label>
<input
type="text"
className="form-control"
value={this.state.job_comp_name}
onChange={this.onChangejob_comp_name}
/>
</div>
<div className="form-group">
<label>Job Description: </label>
<input
type="text"
className="form-control"
value={this.state.job_description}
onChange={this.onChangejob_description}
/>
</div>
<div className="form-group">
<label>Job Location: </label>
<input
type="text"
className="form-control"
value={this.state.job_location}
onChange={this.onChangejob_location}
/>
</div>
<div className="form-group">
<label>Job related field: </label>
<input
type="text"
className="form-control"
value={this.state.job_field}
onChange={this.onChangejob_field}
/>
</div>
<div className="form-group">
<label>Job Closing Date: </label>
<div>
<DatePicker
selected={this.state.job_closing_date}
onChange={this.onChangeDatejob_closing_date}
/>
</div>
</div>
<div className="form-group">
<input
type="submit"
value="Edit Job Listing"
className="btn btn-primary"
/>
</div>
</form>
</div>
);
}
}
I have class component for user sign up along with a form. I am making an api call based on user input to check if a user exists. The handleInputChange initially sets the state to some user input and the handleSubmit makes a call to another function which fetches from an endpoint. I want to set this.state.user to that response. I tried what was on this link but couldn't get it to work. Any ideas would help
import React, { Component } from 'react';
const user_add_api = "http://localhost:5000/add_user";
const user_check_api = "http://localhost:5000/user_by_username/";
here is the class:
class SignUp extends Component {
constructor(props) {
super(props);
this.state = {
first_name: '',
last_name: '',
username: '',
email: '',
password: '',
user: ''
};
}
checkUser = (user) => {
const userPromise = fetch(user_check_api + user);
var meh = '123meh';
userPromise
.then(data => data.json())
.then(data => this.setState({user: {...this.state.user, meh}}))
// let curr = {...this.state};
// curr['user'] = 'somevalue';
// this.setState({ curr:curr['user'] });
console.log(this.state.user);
}
handleSubmit = (event) => {
event.preventDefault();
const data = this.state;
let s = this.checkUser(data.username);
console.log(data);
}
handleInputChange = (event) => {
event.preventDefault();
this.setState({
[event.target.name]: event.target.value,
})
}
render () {
return (
<form className="form-horizontal">
<div className="form-group">
<label className="col-md-4 control-label">First Name</label>
<div className="col-md-4">
<input name="first_name" type="text" placeholder="John" className="form-control input-md" required onChange={this.handleInputChange}></input>
</div>
<label className="col-md-4 control-label">Last Name</label>
<div className="col-md-4">
<input name="last_name" type="text" placeholder="Doe" className="form-control input-md" required onChange={this.handleInputChange}></input>
</div>
<label className="col-md-4 control-label">Username</label>
<div className="col-md-4">
<input name="username" type="text" placeholder="John Doe" className="form-control input-md" required onChange={this.handleInputChange}></input>
</div>
<label className="col-md-4 control-label">Email</label>
<div className="col-md-4">
<input name="email" type="text" placeholder="johndoe#example.com" className="form-control input-md" required onChange={this.handleInputChange}></input>
</div>
<label className="col-md-4 control-label">Password</label>
<div className="col-md-4">
<input name="password" type="password" placeholder="" className="form-control input-md" required onChange={this.handleInputChange}></input>
</div>
<label className="col-md-4 control-label"></label>
<div className="col-md-8">
<button name="save" onClick={this.handleSubmit} className="btn btn-success">Register</button>
</div>
</div>
</form>
);
}
}
export default SignUp;
This fetch(user_check_api + user) return a Promise and you not wait it. Maybe you should change like that
checkUser = (user) => {
var meh = '123meh';
fetch(user_check_api + user)
.then(data => data.json())
.then(data => {
this.setState({user: {...this.state.user, meh}})
console.log(this.state.user) // Show log in in success func
})
}
Or use async/await
checkUser = async (user) => {
const userPromise = await fetch(user_check_api + user);
var meh = '123meh';
userPromise
.then(data => data.json())
.then(data => this.setState({
user: {...this.state.user, meh}
}, console.log(this.state.user))) // Show log in callback
}