I have a MCQ Select using RadioGroup in my code. Once the user selects and submits the value he should be able to come back and see the option he has selected.
(Like google Forms where I can come back and see the option I selected before highlighted.)
Here is my code :
<FormControl component="fieldset">
<RadioGroup onChange={(event)=>{formData.KPI_5_S = event.target.value}} aria-label="status" name="row-radio-buttons-group">
<FormControlLabel value="Finished with respect to requirements" control={<Radio />} label="Finished with respect to requirements" />
<FormControlLabel value="In progress" control={<Radio />} label="In progress" />
<FormControlLabel value="Yet to start" control={<Radio />} label="Yet to start" />
<FormControlLabel value="Failed to get the expected result" control={<Radio />} label="Failed to get the expected result" />
</RadioGroup>
</FormControl>
How do I achieve this result?
You can set the defaultValue in the RadioGroup. See the full API of RadioGroup here. The default value is one of the value prop of the Radio inside:
<FormControl component="fieldset">
<RadioGroup defaultValue="In progress" {...}>
<FormControlLabel value="Finished with respect to requirements" control={<Radio />} label="Finished with respect to requirements" />
<FormControlLabel value="In progress" control={<Radio />} label="In progress" />
<FormControlLabel value="Yet to start" control={<Radio />} label="Yet to start" />
<FormControlLabel value="Failed to get the expected result" control={<Radio />} label="Failed to get the expected result" />
</RadioGroup>
</FormControl>