Why we need "value" prop of RadioGroup in react?

0
votes

i'm a newbie for react and have a simple question regarding it. would be really helpful if you answer the question, thank you!!????

As you know, RadioGroup has the prop called "value", and the official says you can control the radio with it and "onChange" props.

ref) https://mui.com/components/radio-buttons/

<FormControl>
  <FormLabel id="demo-controlled-radio-buttons-group">Gender</FormLabel>
  <RadioGroup
    aria-labelledby="demo-controlled-radio-buttons-group"
    name="controlled-radio-buttons-group"
    value={value}
    onChange={handleChange}
  >
    <FormControlLabel value="female" control={<Radio />} label="Female" />
    <FormControlLabel value="male" control={<Radio />} label="Male" />
  </RadioGroup>
</FormControl>

Here, i have one question, "why i need the prop, 'value', in RadioGroup?".

Actually, the prop "onChange" can receive the value from the selected button by accessing "event.target.value". the below is from the source code of MUI RadioGroupProps.

/**
   * Callback fired when a radio button is selected.
   *
   * @param {object} event The event source of the callback.
   * You can pull out the new value by accessing `event.target.value` (string).
   */
  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;

the question might be non-sense for knowledgeable people, but would appreciate if you answer it????

3
reactjs

3 Answers

0
votes

Lets say you have used the form to get a value from user and then saved it in database. Next time when the user wants to edit the values, you fetch the previously saved form data and show that in UI, at that time you will have to show the user that this was the selected value, for which you will have to pass the previous value to the value prop. Otherwise your form will only show black fields or some defaultValue you have entered!

UPDATE

defaultValue is one time use only, which mean what ever value you provided by default during the initial render, it will load that value. Where as editing the form will require fetching data from api and then show it in UI, this will take time, which means in initial render the form value will be empty and after the state update from api fetch, you will have value for the form. In this case if you try to pass this newly fetched value to defaultValue it will not update the form value, because it will always load what ever was provided during the initial load.

But if you pass the newly fetched value to value props, you will see the new value get updated in the form

0
votes

onChange method will allow you to switch between radios and capture the particular value.

You can capture the particular value via onChange and then save it into your react state and use that state variable in value prop.

To show which radio is active, you can use value prop of RadioGroup. One another example is that when user submit RadioGroup value in the POST request of API and then when you fetch the data with GET request, you can show which RadioGroup will be active based on user submission.

0
votes

So, as you are a newbie, I try to explain little elaborate

OnChange triggers when you select(selecting is an event) any of the radio buttons with keyboard/mouse..

<FormControl>
  <FormLabel id="demo-controlled-radio-buttons-group">Gender</FormLabel>
  <RadioGroup
    aria-labelledby="demo-controlled-radio-buttons-group"
    name="controlled-radio-buttons-group"
    value={value}
    onChange={(event)=> console.log(event.target.value)} 
  >
    <FormControlLabel value="Eclairs" control={<Radio />} label="Chocolate" />
    <FormControlLabel value="Audi" control={<Radio />} label="Cars" />
  </RadioGroup>
</FormControl>

onChange={(event)=> console.log(event.target.value)}

when you click on any one of the radio button, it triggers onchange event and event.target.value holds the same value as the value of the radio button you clicked

Eg: If you click Chocolate, you will get Eclairs as the value