RadioButtonGroup within nested List - material-ui

Question

I'm using Material-UI and I'd like to use the List/ListItem Component to group my Radio Buttons.
Similar to this one:
<RadioButtonGroup ...>
<List>
<ListItem
...
nestedItems={[
<RadioButton ... />,
<RadioButton ... />
]}
/>
<ListItem
...
nestedItems={[
<RadioButton ... />,
<RadioButton ... />
]}
/>
</List>
</RadioButtonGroup>
Is there a way to archive this?
Thanks.

Answer 1

My temporary workaround is to use checkboxes which look and behave like radio buttons.
import List from 'material-ui/lib/lists/list';
import ListItem from 'material-ui/lib/lists/list-item';
import Checkbox from 'material-ui/lib/checkbox';
import RadioChecked from 'material-ui/lib/svg-icons/toggle/radio-button-checked';
import RadioUnchecked from 'material-ui/lib/svg-icons/toggle/radio-button-unchecked';
...
onChangeRadio = (event) => this.setState({ radioValue: event.target.value });
...
<List>
<ListItem
primaryText='First Group'
primaryTogglesNestedList={true}
nestedItems={[
<ListItem
primaryText='Radio 1'
leftCheckbox={
<Checkbox
value='1'
onCheck={this.onChangeRadio}
checked={this.state.radioValue == '1'}
checkedIcon={<RadioChecked />}
unCheckedIcon={<RadioUnchecked />}
/>
}
/>
<ListItem
primaryText='Radio 2'
leftCheckbox={
<Checkbox
value='2'
onCheck={this.onChangeRadio}
checked={this.state.radioValue == '2'}
checkedIcon={<RadioChecked />}
unCheckedIcon={<RadioUnchecked />}
/>}
/>
]}
/>
<ListItem
primaryText='Second Group'
primaryTogglesNestedList={true}
nestedItems={[
<ListItem
primaryText='Radio 3'
leftCheckbox={
<Checkbox
value='3'
onCheck={this.onChangeRadio}
checked={this.state.radioValue == '3'}
checkedIcon={<RadioChecked />}
unCheckedIcon={<RadioUnchecked />}
/>
}
/>
<ListItem
primaryText='Radio 4'
leftCheckbox={
<Checkbox
value='4'
onCheck={this.onChangeRadio}
checked={this.state.radioValue == '4'}
checkedIcon={<RadioChecked />}
unCheckedIcon={<RadioUnchecked />}
/>
}
/>
]}
/>
</List>
I hope there is a better solution than this.

Answer 2

Maybe this will help
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles';
import List from '#material-ui/core/List';
import ListItem from '#material-ui/core/ListItem';
import ListItemSecondaryAction from '#material-ui/core/ListItemSecondaryAction';
import ListItemText from '#material-ui/core/ListItemText';
import Checkbox from '#material-ui/core/Checkbox';
import IconButton from '#material-ui/core/IconButton';
import CommentIcon from '#material-ui/icons/Comment';
import Radio from '#material-ui/core/Radio';
import RadioGroup from '#material-ui/core/RadioGroup';
import FormHelperText from '#material-ui/core/FormHelperText';
import FormControlLabel from '#material-ui/core/FormControlLabel';
import FormControl from '#material-ui/core/FormControl';
import FormLabel from '#material-ui/core/FormLabel';
const styles = theme => ({
root: {
width: '100%',
maxWidth: 360,
overflow: 'auto',
maxHeight: 500,
backgroundColor: theme.palette.background.paper,
},
});
class RadioList extends React.Component {
state = {
checked: 0,
};
handleToggle = value => () => {
this.setState({ checked: value });
};
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
<List>
{[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(value => (
<ListItem
key={value}
role={undefined}
dense
button
onClick={this.handleToggle(value)}
className={classes.listItem}
>
<FormControlLabel control={<Radio />}
checked={this.state.checked === value}
tabIndex={-1}
disableRipple
/>
<ListItemText primary={`Line item ${value + 1}`} />
</ListItem>
))}
</List>
</div>
);
}
}
RadioList.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(RadioList);