React Function loading initial value for Radio Group and selecting it

Asked by Daleyza Larson on
8 Answers

Answer by Heidi Wiggins

I am having an issue with setting the initial value of a radio group (from a value passed into the function) like this:,The goal of this function is to pre-load any saved value that might have been set before (from the team object passed in), then update to a new ranking value if required and save.,I've tried setting the React.useState(team.ranking) but still no button is selected.

As you have mentioned that the value is passed from a class component to a function component, see if the below code answers your question.

function FormControlLabelPosition(props) {

  const onChange = (e) => props.onChange(

  return (
    <FormControl component="fieldset">
      <FormLabel component="legend">Team Ranking</FormLabel>
      <RadioGroup aria-label="ranking" name="ranking1" value={props.value} onChange={onChange}>
        <FormControlLabel value="rank1" control={<Radio />} label="Rank 1" />
        <FormControlLabel value="rank2" control={<Radio />} label="Rank 2" />
        <FormControlLabel value="rank3" control={<Radio />} label="Rank 3" />
        <FormControlLabel value="rank4" control={<Radio />} label="Rank 4" />

export default class Parent extends React.Component {
  state = {
    value: "rank4"

  handleChange = (val:string) => this.setState({value: val})

  render() {
    return (<FormControlLabelPosition value={this.state.value} onChange={this.handleChange}/>)


Answer by Amayah Joseph

So here I register the event of the input, and then change the state, which will then trigger the render to show on the footer.

var SearchResult = React.createClass({
  getInitialState: function () {
    return {
      site: '',
      address: ''
  onSiteChanged: function (e) {
      site: e.currentTarget.value

  onAddressChanged: function (e) {
      address: e.currentTarget.value

  render: function(){
       var resultRows ={
           return (
                        <td><input type="radio" name="site_name" 
                                   checked={ === result.SITE_NAME} 
                                   onChange={this.onSiteChanged} />{result.SITE_NAME}</td>
                        <td><input type="radio" name="address" 
                                   checked={this.state.address === result.ADDRESS} 
                                   onChange={this.onAddressChanged} />{result.ADDRESS}</td>
       }, this);
       return (
           <table className="table">
                       <td>chosen site name {} </td>
                       <td>chosen address {this.state.address} </td>


Answer by Roberto White

More Details Refer


Answer by Dakota Day

The onChangeValue() function gets called when the user selects the radio button from the group, and the value is updated into the component state.,The function onChangeValue() is attached with div so as soon as the user selects any radio button, it will be reflected in the function.,Because that name property puts all the radio buttons into a group, you can get the value once the user selects any of them, as explained below.

1render() {
2    return (
3      <div>
4        <input type="radio" value="Male" name="gender" /> Male
5        <input type="radio" value="Female" name="gender" /> Female
6        <input type="radio" value="Other" name="gender" /> Other
7      </div>
8    );
9  }


Answer by Haylee Mercado

The difference from Select is that Radio is visible to the user and can facilitate the comparison of choice, which means there shouldn't be too many of them.,Render radios by configuring options. Radio type can also be set through the optionType parameter.,Radio.Group group - optional

import { Radio } from 'antd';

ReactDOM.render(<Radio>Radio</Radio>, mountNode);


Answer by Rosalia Macdonald

radio group,wrap a group of nz-radio。,Vertical nz-radio-group, with more radios.,nz-radio unavailable.

  • Used to select a single state in multiple options.
  • The difference between Select is that Radio is visible to user and can facilitate the comparison of choice. So, when you want to use Radio, option should not be too much.
import { NzRadioModule } from 'ng-zorro-antd/radio';


Answer by Marceline Stuart

The index of selected radio button. This is used when this component is activated. If you want to pass initial as asynchronous, you can use updateIsActiveIndex function.,If you want to make it empty initially, please pass -1,If you pass style, you can change label text style as you want

fix Pro feature example


Answer by Aisha Berger

The RadioGroup is a UI component that contains a set of radio buttons and allows an end user to make a single selection from the set. This demo illustrates how to change the component layout, define a custom template and handle the value change event., Customization Custom Templates Disabled Date/Time Ranges Customize Individual Views Increased View Duration Limit the Appointment Count per Cell Context Menu Integration , Select Box Overview Search and Editing Customize Drop-Down Button Grouped Items

More Details Refer