MUI 1.0.0 nesting components in RadioGroups.

[pgee70]

When using Grid components to responsively show Radio buttons.

<RadioGroup > <Grid container > <Grid item sm={3}> <FormControlLabel value="male" control={<Radio color="primary" />} label="Male" /> </Grid> <Grid item sm={3}> <FormControlLabel value="female" control={<Radio color="primary" />} label="Female" /> </Grid> </Grid> </RadioGroup>

The RadioGroup's the props are sent to a

tag (of the Grid) which then causes the warning:

warning.js:33 Warning: React does not recognize the inputRef prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase inputref instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in div (created by Grid)
in Grid (created by GridWrapper)
in GridWrapper (created by WithStyles(GridWrapper))
in WithStyles(GridWrapper) (at index.js:256)
in div (created by FormGroup)
in FormGroup (created by WithStyles(FormGroup))
in WithStyles(FormGroup) (created by RadioGroup)
in RadioGroup (at index.js:255)
in div (created by FormControl)
in FormControl (created by WithStyles(FormControl))
in WithStyles(FormControl) (at index.js:241)

inputRef is injected here: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/RadioGroup/RadioGroup.js line 53:

this can be demonstrated here https://codesandbox.io/s/pwy5nw581m

My hacky fix for this is to use a GridComponent as a component property of <Grid component={GridComponent}

where GridComponent is:
import React from 'react';
import PropTypes from 'prop-types';

const GridComponent = (props) => {
const { children, name, inputRef, ...otherProps } = props;
if (children.length) {
const mutatedChildren = children.map((c) => {
if (!React.isValidElement(c)) {
return null;
}
return React.cloneElement(c, { name, inputRef });
});
return <div {...otherProps} >{mutatedChildren}

;
}
return <div {...otherProps} >{children};
};

GridComponent.propTypes = {
children: PropTypes.oneOfType([PropTypes.array, PropTypes.node]),
name: PropTypes.string,
inputRef: PropTypes.func,
};

export default GridComponent;

[oliviertassinari]

I'm closing as a duplicate of #2225

[pgee70]

Thanks Oliver, i saw that #2225 was from 2015 so i thought with v1 just out, it could do with a new ticket. No problems.

[luongs3]

Got the same one.

  <Grid container className="answer-choice">
    <RadioGroup
      name="selected_answer"
      aria-label="answer"
      value={`${selectedAnswer}`}
      onChange={e => onSelectAnswer(e.target.value)}
    >
      {answers.map((answer, index) => (
        <Grid item xs={12} key={answer.id}>
          <FormControlLabel
            value={`${index}`}
            control={<Radio />}
            label={answer.answer}
          />
        </Grid>
      ))}
    </RadioGroup>
  </Grid>

[oliviertassinari]

It will be released as v4.0.0-alpha.6.