React hook useState not updating onclick

Question

I am trying to update the sidebar class when the closehandler function is called but the state is not updating. How do I go about that.

function RiderSidebar({ sidebar, close }) {

const [SidebarClass, setSidebarClass] = useState('sidebar')

const closeHandler = (e) => {

    e.preventDefault();
    console.log("closed click");
    setSidebarClass("user-side-bar close")
    console.log("slidebar is " + SidebarClass);

    setTimeout(() => {
        close()
    }, 1000)
}
return (
    <div className={SidebarClass} >
        <button className="close-btn" onClick={closeHandler}>X</button>

        <ul>
            <li><NavLink to='/rider/dashboard' className="user-nav"  ><DashboardIcon />  Dashboard</NavLink></li>
            <li><NavLink to='/rider/orders' className="user-nav"  ><HistoryIcon /> Orders</NavLink></li>
            <li><NavLink to='/user/logout' className="user-nav"  ><PowerSettingsNewIcon /> Logout</NavLink></li>
        </ul>
    </div >
)
}

```but the state is not updating``` - Please explain, where are you checking this? — Diwakar Singh, Mar 06 '21 at 11:50
@DiwakarSingh when I click the close button if I check using the console.log on closeHandler function. but it displays sidebar on the console. — nnam4x, Mar 06 '21 at 11:59
@nnam4x React batches the state update. If you will check the state update immediately after updating the state react then you may not get the updated state. You can check the updated state in render method. Please verify that you get the updated state there or not? — Diwakar Singh, Mar 06 '21 at 12:01
@nnam4x You are welcome. I have updated this comment as the answer for community. Please accept and upvote if this solves your issue. — Diwakar Singh, Mar 06 '21 at 12:11
Does this answer your question? [Why calling react setState method doesn't mutate the state immediately?](https://stackoverflow.com/questions/30782948/why-calling-react-setstate-method-doesnt-mutate-the-state-immediately) — buzatto, Mar 06 '21 at 17:04

score 5 · Accepted Answer · answered Mar 06 '21 at 12:10

5

React batches the state update. If you will check the state update immediately after updating the state react then you may not get the updated state. You can check the updated state in render method. It should be updated there.

answered Mar 06 '21 at 12:10

Diwakar Singh

684
1
5
19

score 4 · Answer 2 · edited Mar 06 '21 at 15:56

I think you add useEffect hooks to check I explain briefly what did you wrong when you click your close button closed handler function trigger and setState function calling at the same time(asynchronous) console.log statement printed. //'side bar'

in your code, you can't verify your state change or not (only you can verify from the render method) because the closed handler function triggers only one time if you want to check your className is changed or not from console.log statement you must need useEffect hook it will trigger every time after your state changed so can conform it your className is changed or not

//only trigger one time 
 useEffect(()=>{
 console.log(SidebarClass);//output 'sidebar'
 },[])
        
 //hooks trigger every time after your state changed
  useEffect(()=>{
 console.log(SidebarClass); 
 //output 'sidebar' 
 //output user-side-bar close
            })
        
 //only trigger if SidebarClass state changed
 useEffect(()=>{
 console.log(SidebarClass);
 //output 'sidebar' 
 //output user-side-bar close
 },[SidebarClass]);

zahra zamani · Answer 3 · 2021-03-06T11:54:51.973

0

useState hook is asynchronous, and will not be reflected immediately.. try this:

  useEffect(() => {
    
    }, [SidebarClass]);

edited Mar 06 '21 at 11:54

answered Mar 06 '21 at 11:41

zahra zamani

1,323
10
27

React hook useState not updating onclick

3 Answers3