Better way to generate a component array in a React reusable component - reactjs

Question

I am building a reusable component for radio buttons. Naturally, it is unpredictable to know how many radios it will be needed in each case, so some how that has to be mapped in an array. Also, the component needs to respect the HTMl structure that it will render in and the RadioGroup and Radio buttons must be in the same component for scope purposes.
I have it working this way:
Component
const CMRadioGroup = (props, context) => {
return (
<RadioGroup
name={props.name}
style={{flexDirection: "row"}}
className={props.className}
value={props.value}
onChange={props.onChange}>
{props.radios.map(radio =>
<FormControlLabel
key={radio.value}
value={radio.value}
style={{marginRight: 40, height:30}}
control={<Radio />}
label={context.t(radio.label)} />,
)}
</RadioGroup>
);
};
Usage
<CMRadioGroup
name="select"
value={this.state.select}
onChange={this.handleChangeSelect}
//I don't like the part below
radios={[
{
value:"radio1",
label:"My First Radio",
},
{
value:"radio2",
label:"My Second Radio",
},
]}/>
}
It would prefer if instead of using it as a json array, that they were functional items that can be propped with functions and other props such as colors, onChange, etc. Something like this for example:
<CMRadioGroup
name="select"
value={this.state.select}
onChange={this.handleChangeSelect}
//This is better
<Radio
color="primary"
value="radio1",
label="My First Radio"/>
<Radio
color="primary"
value="radio2",
label="My Second Radio"/>
...
<Radio
color="secondary"
value="radio-nth",
label="My Nth Radio"/>
]}/>
}
Thanks in advance guys

Answer 1

What I can interpret is you want to pass radio buttons as children to component. you can easilt pass them as a clild. See example.
<CMRadioGroup
name="select"
value={this.state.select}
onChange={this.handleChangeSelect}
>
<Radio
color="primary"
value="radio1",
label="My First Radio"/>
<Radio
color="primary"
value="radio2",
label="My Second Radio"/>
<Radio
color="secondary"
value="radio-nth",
label="My Nth Radio"/>
</CMRadioGroup>
Do not pass them as props. The only drawback of this approach is that the component will rerender everytime of state change as children are treated as objects and react shallow compares the props (when using React.PureComponent).