Material-UI , Radio Button + map function ( React JS)

Question

so i need help guys, i want to replace the old radio button (classic) with a new one using material-ui. i couldn't make it. please suggest a solution. thx in advance. in pic u will see everything

class Question extends Component {
  render() {
    var that = this; // Funny way to be able to access this from inside our iterator() function below.
    var iterator = this.props.questionChoices.map(function(choice){
            return (
                <div className="radio">
                <label>
                    <input type= {that.props.questionType} name={that.props.questionID} value={choice}/>
                    {choice}
                </label>
                <RadioButtonGroup >
                    <RadioButton
                        value="ludicrous"
                        label={choice}
                        valueSelected={choice}
                        style={styles.radioButton}
                    />
                </RadioButtonGroup>
                </div>
              );
      });
    return (

            <div className="row">
                <div className="form">
                  <Paper zDepth={1} >
                  <div className="h3">
                    <h3 >{this.props.questionID} - {this.props.questionText}</h3>
                        {iterator}
                        </div>
                        </Paper>
                </div>
            </div>
    );
    }

}

result of the problem image

var iterator = this.props.questionChoices.map(function(choice){ return ( <div className="radio"> <label> <input type= {that.props.questionType} name={that.props.questionID} value={choice}/> {choice} </label><RadioButtonGroup > <RadioButton value="ludicrous" label={choice} valueSelected={choice} style={styles.radioButton} /> </RadioButtonGroup> — Nizar Jailane
– Nizar Jailane, Commented Jan 18, 2018 at 18:11

Crysfel · Accepted Answer · 2018-01-18 18:44:12Z

1

You are rendering the old radio button as well, you also need to define the selected value in the group component and render the group only once, currently you are rendering it for every option.

var iterator = (
  <RadioGroup value={this.state.value} onChange={this.handleChange}>
  {  this.props.questionChoices.map(choice =>
        <FormControlLabel value={choise} control={<Radio />} label={choise} />
    )
  }
  </RadioGroup>
);

Then you need to create the handleChange function to update the state.

class Question extends Component {
  state = {
    value: '',
  };

  handleChange = (event, value) => {
    this.setState({ value });
  };
...

You can find a working example here: https://material-ui-next.com/demos/selection-controls/

answered Jan 18, 2018 at 18:44

Crysfel

8,1883 gold badges35 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Material-UI , Radio Button + map function ( React JS)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related