CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
aditya kumar
aditya kumar

Reputation: 3023

Material ui radio button selects the previous button value in reactjs

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>

Upvotes: 1

Views: 1058

Answers (2)

Taghi Khavari
Taghi Khavari

Reputation: 6582

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

Upvotes: 2

user0101
user0101

Reputation: 1517

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

Upvotes: 3

Related Questions