undefined is not an object (evaluating '_this2.onRadioPressed') - react-native

Question

I'm building radio buttons using my component and the buttons are built fine but the onPress is not working. I get the error in the title on click of the radio button. I suspect, based on the error, that 'this' is not what I think it is. Any help is appreciated. Here's the relevant code:
let radio_props = [
{label: 'forward', value: 0 },
{label: 'back', value: 1 }
];
<RadioBtn
radioGroupLabel={'Main Label'}
radioLabels={radio_props}
style={styles.radioElement}>
</RadioBtn>
Then in my RadioBtn.js file...
onRadioPressed = (val) => {
console.log('VAL:', val);
this.setState({selectedValue:val});
};
renderRadios(obj, i) {
console.log('OBJ:', obj);
return (
<View style={styles.firstRadioContainer}>
<TouchableOpacity
onPress={(value, index) => {
this.onRadioPressed(obj.value)
}}
underlayColor='#f1c40f'>
<Text value={obj.value} style={styles.radio}>{obj.label}</Text>
</TouchableOpacity>
</View>
)
};
render() {
let renderedRadios = this.props.radioLabels.map(this.renderRadios);
return (
<View>
<View style={styles.radioLabelContainer}>
<Text style={styles.radioLabel}>{this.props.radioGroupLabel}</Text>
</View>
<View style={styles.radioGrp}>
{renderedRadios}
</View>
</View>
);
};

Answer 1

You are right, this in renderRadios method is no longer pointing to RadioBtn class because of the way you invoke in the array's map method.
Try changing to the following by using arrow function expression:
let renderedRadios = this.props.radioLabels.map((o, i) => this.renderRadios(o, i));