Material ui radio button selects the previous button value in reactjs

Question

I have added radio button group to may reactjs app. here the problem is when i try to log the value i get the value of previous radio button instead of getting current button value. eg. Suppose When i click on go from all to awaited then this logs all. I don't know what is causing this issue.

my Code

 const [radioValue, setRadioValue] = React.useState("all");

function handleChangeRadio(event) {

    const value = event.target.value;
    setRadioValue(value);
    console.log(radioValue);             <---- Here When i try to log the value. it shows the value of previous button.

  }


<RadioGroup
              className={classes.radioGroup}
              aria-label="status"
              name="status"
              value={radioValue}
              onChange={handleChangeRadio}
              row
            >
              <FormControlLabel
                checked={radioValue === "all"}
                value="all"
                control={<Radio color="primary" />}
                label="All"
                labelPlacement="end"
                className={classes.radioLabel}
              />
              <FormControlLabel
                checked={radioValue === "approved"}
                value="approved"
                control={<Radio color="primary" />}
                label="Approved"
                labelPlacement="end"
                className={classes.radioLabel}
              />
              <FormControlLabel
                checked={radioValue === "awaited"}
                value="awaited"
                control={<Radio color="primary" />}
                label="Awaited"
                labelPlacement="end"
                className={classes.radioLabel}
              />
              <FormControlLabel
                checked={radioValue === "on_hold"}
                value="on_hold"
                control={<Radio color="primary" />}
                label="On Hold"
                labelPlacement="end"
                className={classes.radioLabel}
              />
            </RadioGroup>

user0101 · Accepted Answer · 2020-06-09 11:20:44Z

3

The state update using the updater provided by useState hook is asynchronous, and will not immediately reflect.

Try to read the value with useEffect() hook instead:

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

edited Jun 9, 2020 at 11:20

answered Jun 9, 2020 at 11:19

user0101

1,5872 gold badges13 silver badges18 bronze badges

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

1 Comment

aditya kumar Over a year ago

is there any solutions for this ?

Taghi Khavari · Accepted Answer · 2020-06-09 11:54:17Z

You need to know that:

setState actions are asynchronous and are batched for performance gains. This is explained in the documentation of setState.

but Why? setState alters the state and causes rerendering. This can be an expensive operation and making it synchronous might leave the browser unresponsive

Thus the setState calls are asynchronous as well as batched for better UI experience and performance.

What if I need to do something after setState?

if you had a React Class Component you can do what you need inside setState callback like this:

this.setState(newState, function(){
   // Do what it needs to be done after updating newState here
});

and if you had a React Functional Component you need to listen for state change with useEffect hook and do what you need in useEffect like this:

useEffect(() => {
  // Do what it needs to be done after updating state here
}, [radioValue])

Collectives™ on Stack Overflow

Material ui radio button selects the previous button value in reactjs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related