MUI RadioGroup setup in React

Question

I am trying to accomplish a relevant simple task in React while using MUI which is:

Make a component for RadioGroup
Implement the component inside other one
Pass the value and the handler (onChange)

Usually everything works fine before when I made my own radio buttons but when I am using MUI radio buttons, state dose not pass as a value and the handler dose not fire. Please take a look on the code snippet. Thank you in advance

import React, { Component} from 'react';
import { FormControl, FormControlLabel, RadioGroup, Radio } from '@material-ui/core';


class example extends Component{
    render(){
        return( 

            <FormControl component="fieldset">
            <RadioGroup
              value={this.props.value}
              onChange={this.props.handler}
              row aria-label="something"
              aria-label="something"
              name="radio-something-group"
               >
              <FormControlLabel value="example1" control={<Radio />}                          
              label="Example 1" />
              <FormControlLabel value="example2" control={<Radio />}                          
              label="Example 2" />
            </RadioGroup>
          </FormControl>
        );
    }
}

export default example;


import React, { Component} from 'react';
import example;


class implment extends Component{
      state = {value = "example1"}
      
      handler(e)
      {
       this.setState({ value: e.target.value});
      }
    render(){
        return( 
            <example value={value} onChange={this.handler} />
        );
    }
}

export implment;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Is there any reason why you're not capitalizing the first letter in your components? — Ktoxcon, Oct 06 '21 at 06:48
Hello @Ktoxcon, this is just a quick code snippet, sorry for the mistakes, newValue dose not exists, I edited the code, and the component name dose not mean anything — Abdulrazzak Alsssouki, Oct 06 '21 at 06:49
You should capitalize your component name: See [this](https://stackoverflow.com/a/30373505/9449426) answer. — NearHuscarl, Oct 06 '21 at 06:49
Do you have a constructor in the `example` component? Or it was omitted? — Ktoxcon, Oct 06 '21 at 06:49
Yes, I have everything and I am using other stuffs from MUI and they work, the problem related only to Radio buttons, (I am binding the handler) — Abdulrazzak Alsssouki, Oct 06 '21 at 06:50
@NearHuscarl yes you are right, my component has a capital letter but here I just wrote a quick code, the important section is just the Radio buttons, everything else is set — Abdulrazzak Alsssouki, Oct 06 '21 at 06:54

score 0 · Answer 1 · answered Oct 06 '21 at 08:15

0

Thank you for the help. I found the problem, I made a mistake on defining the props on the Radio component, Should say onChange={this.props.onChange}. Same apply for the value (hope this will help someone)

answered Oct 06 '21 at 08:15

Abdulrazzak Alsssouki

163
1
7

MUI RadioGroup setup in React

1 Answers1