Material UI - Radios don't valorize my state

user_14513020 0
Viewed 37

I'm new in full stack developing and I'm trying to code something to understand better frontend with React JS and Material UI. I've written a Dialog to send a post to backend and I tried to some radios to select each values, but they do not valorized properly. I'm new in this, so be patient, I'show you my code:

class NewAdv extends Component {

    state = {
        open:false,
        type:'Sell',
        body:'',
        errors:{}
    };
   
    radioChange = (event) => {
        this.setState({type: event.target.value});
        console.log(this.state.type)
      };
render() {
       return (
           <RadioGroup aria-label="Type" name="type" color="primary" value={this.state.type} onChange={this.radioChange}>
                                    <FormControlLabel type="Sell" control={<Radio />} label="Sell" />
                                    <FormControlLabel type="Trade" control={<Radio />} label="Trade" />
                                    <FormControlLabel type="Other" control={<Radio />} label="Other" />
                                </RadioGroup>
    )
}

How can I do?

material-ui reactjs javascript
1 Answers

you are picking up the value from the target but your target does not define the value.

On the FormControlLabel, swap the type with the value

do this

<RadioGroup aria-label="Type" name="type" color="primary" 
  value={this.state.type} onChange={this.radioChange}>
  <FormControlLabel value="Sell" control={<Radio />} label="Sell" />
  <FormControlLabel value="Trade" control={<Radio />} label="Trade" />
  <FormControlLabel value="Other" control={<Radio />} label="Other" />
</RadioGroup>
user_29519330
Related