Reputation: 47
Inside the verifyPassword function when I am trying to update the state of user using setUser, it is not updating. Therefore the values of input remain the same and also when I console log user it is empty. I have also tried by first storing the res object from .done method in another variable and then update the state, but that didn't work too. below is the code.
import React , {useState} from "react";
import $ from "jquery";
function ChangeDetails(props){
var [pass , setPass] = useState("");
var [user , setUser] = useState({
name:"",
phone:"",
email:""
});
var [auth ,setAuth] = useState(false);
function passChange(e){
let password = e.target.value;
setPass(password);
}
function verifyPassword(event){
event.preventDefault();
$.post("http://localhost:4000/details" , {username: sessionStorage.getItem("User") , password: pass})
.done((res)=>{
let {name , phone, email} = res;
console.log(name);
setUser=({
name:name,
phone:phone,
email:email
})
console.log(user);
console.log(res);
setAuth(true);
})
.fail(e=>{console.log(e);})
}
function handleChange(e){
let {name , value} = e.target;
setUser(prevValue=>{
return {
...prevValue,
[name] : value
}
})
}
return (
<div>
<h1>Change Your Details here @{sessionStorage.getItem("User")}</h1>
{!auth && <form onSubmit={verifyPassword}>
<h2>Verify by entering Password</h2>
<input onChange={passChange} value={pass} type="password" name="password" />
<button>Submit</button>
</form>}
{auth && <form>
<label>Name:
<input type="text" onChange={handleChange} value={user.name} name="name" id="name" /></label><br />
<label>Phone Number:
<input type="text" onChange={handleChange} value={user.phone} name="phone" id="phone" /></label><br />
<label>Email:
<input type="email" onChange={handleChange} value={user.email} name="email" id="email" /></label><br />
<button>Change</button>
</form>}
</div>
);
}
export default ChangeDetails;
Upvotes: 0
Views: 41
Reputation: 12787
Because setUser
is a funtion to update state. Use
setUser({
name:name,
phone:phone,
email:email
})
instead of
setUser = ({
name:name,
phone:phone,
email:email
})
Upvotes: 2
Reputation: 3147
you got typo on setUser within verifyPassword function
you typed setUser=
it should be setUser()
Upvotes: 3