React Js material UI not updating the value when set

Question

so I have this code in material UI react js which is not updating the value properly or so I thought, to explain this further I have this code

import * as React from 'react';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';

export function Home() {


const [value, setValue] = React.useState('Pending');

  const handleChange = (event, newValue) => {
      setValue(newValue);
      console.log(value);
  };

  return (
    <div>
        <>
        <Tabs
          value={value}
          onChange={handleChange}
          textColor="secondary"
          indicatorColor="secondary"
          aria-label="secondary tabs example"
        >
          <Tab value="Pending" label="Pending" />
          <Tab value="Received" label="Received" />
          <Tab value="Prepared" label="Prepared" />
          <Tab value="Cancelled" label="Cancelled" />
        </Tabs>
        </>
    </div>
  );
}

If I run this code and click on the Tab with the label "Pending" the console.log won't be triggered. if I click again on the Tag with the label "Received" the console.log with displays "Pending" instead of "Received".

This happens all the time I thought when you set the value and console log it should show the latest value you selected.

sample output:

As you can see am currently selected the "Received" Tag but on the display its showing "Pending"

Is this how react js/Material UI behaves or am I just missing something here?

thanks

Setting state is asynchronous.

Dave Newton
– Dave Newton

2023-02-01 17:00:53 +00:00
Commented Feb 1, 2023 at 17:00 — Dave Newton
– Dave Newton, Commented Feb 1, 2023 at 17:00

Jacob Coughenour · Accepted Answer · 2023-02-01 17:40:05Z

1

Like Dave Newton said in the comments, setting the state is asynchronous as mentioned in the React Docs here: https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

If you want to console.log the value, you can update your handler to log the new value instead

const handleChange = (event, newValue) => {
  setValue(newValue);
  console.log(newValue);
};

Or you can use useEffect outside the handler to always log value when it changes

useEffect(() => {
    console.log(value);
}, [value]);

answered Feb 1, 2023 at 17:40

Jacob Coughenour

512 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Js material UI not updating the value when set

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related