Pass function as prop - reactjs

Question

I am trying to pass a onSelection function to a component:
const GenderScreen = (props) => {
const onSelection = () => {console.log('clicked')};
const buttons = ['one','two', 'three'];
const breadcrumb = `${i18n.t('stage 1')} > ${i18n.t('stage 2')} > ${i18n.t('stage 3')}`;
const sceneConfig = {
centredButtons: ['one','two', 'three'],
question: {
text: [breadcrumb, i18n.t('What is your ethnicity?')],
},
selectNumber: {},
onSelection: this.onSelection
};
return <SceneCentredButtons { ...props} sceneConfig={sceneConfig} />;
};
Child component:
const SceneCentredButtons = props => (
<LYDSceneContainer goBack={props.goBack} subSteps={props.subSteps}>
<Flexible>
<LYDSceneQuestion {...props.sceneConfig.question} />
<LYDCentredButtons
{...props.sceneConfig}
onSelection={props.sceneConfig.onSelection}
/>
</Flexible>
</LYDSceneContainer>
);
function LYDCentredButtons(props) {
const buttons = this.props;
return (
<View style={styles.main}>
{props.centredButtons.map((button, i) => {
const isLast = i + 1 === props.centredButtons.length;
const marginBottomStyle = !isLast && {
marginBottom: theme.utils.em(1.5),
};
return (
<LYDButton
style={[styles.button, marginBottomStyle]}
label={button.text}
onPress={() => props.onSelection(button.value)}
/>
);
})}
</View>
);
}
However, when in my component I get the error:
props.onSelection is not a function
How can I pass a function to use when my buttons are clicked?

Answer 1

GenderScreen is a stateless functional component, you don't need to use this keyword (this will be undefined).
So instead of this.onSelection use onSelection.
Like this:
const sceneConfig = {
centredButtons: ['one','two', 'three'],
question: {
text: [breadcrumb, i18n.t('What is your ethnicity?')],
},
selectNumber: {},
onSelection: onSelection
};