chaos
chaos

Reputation: 47

States in react not getting updated

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

Answers (2)

Viet
Viet

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

ejabu
ejabu

Reputation: 3147

you got typo on setUser within verifyPassword function

you typed setUser=

it should be setUser()

Upvotes: 3

Related Questions