States in react not getting updated

Question

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;

Does this answer your question? [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) — Dan O, Aug 25 '21 at 12:17
State updates are async. `console.log`ing the `user` directly after calling `setUser` will not reflect the updated state. The new state will only be visible during the next render that gets triggered by the state update. — trixn, Aug 25 '21 at 12:17

score 3 · Accepted Answer · answered Aug 25 '21 at 12:22

3

you got typo on setUser within verifyPassword function

you typed setUser=

it should be setUser()

answered Aug 25 '21 at 12:22

ejabu

2,998
23
31

Damn, I didn't realize this...Really thanks sir for watching the code this closely. – chaos Aug 25 '21 at 12:50
sure, no probs. fyi, you may accepted this as an answer to close the question off. – ejabu Aug 25 '21 at 12:57

score 2 · Answer 2 · answered Aug 25 '21 at 12:24

2

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
})

answered Aug 25 '21 at 12:24

Viet

12,133
2
15
21

States in react not getting updated

2 Answers2