Get the value of radio button using material-ui for summary page - material-ui

Question

I'm creating a form and now attempting to get the value for a summary page.
I'm not having trouble in selecting the radio buttons. The problem lies in getting the value of radio button in material-ui for a summary page/print the value.
The following are my code:
Registering Office: <br></br>
<Grid container direction={'row'} spacing={1}>
<Grid item xs={3}>
<Radio id="RegOffice" value="Head Office" checked={RegOffice==="Head Office"} onChange={handleChangeRegOffice}
color="primary"
/>
Head Office
</Grid>
<Grid item xs={3}>
<Radio id="RegOffice" value="Branch Office" checked={RegOffice==="Branch Office"} onChange={handleChangeRegOffice}
color="primary" />
Branch Office
</Grid>
<Grid itemxs={3}>
<Radio id="RegOffice" value="Facility" checked={RegOffice==="Facility"}
onChange={handleChangeRegOffice}
color="primary" //label="Facility"
/>
Facility
</Grid>
</Grid>
for handlechange:
const [RegOffice, setRegOffice] = React.useState('Head Office')
const handleChangeRegOffice = (event) => { setRegOffice(event.target.value)
console.log(RegOffice) }
=end=
With no luck, every time I call "RegOffice", it always returns blank value.
Appreciate any help. thank you

Answer 1

You code is fine, but you're doing console.log(RegOffice), before the state is updated. React set/update state Asynchronously, which means when you're viewing the console.log(RegOffice) the regOffice state still contains the old state value. The updating state is a really vital React concept and learning about it will be very beneficial for creating/understanding the React Code. Here is a docs link
I've created the codesandbox link out of your code and just moved the console.log() outside the handleChangeRegOffice function.
const handleChangeRegOffice = (event) => {
setRegOffice(event.target.value);
};
console.log(RegOffice);
the updated function and console statement