Attaching onPress handler to a Text that was constructed outside the component - reactjs

Question

I have my component class, let's call it MyComponent. It has a complicated execution logic, but here's how it looks like with unnecessary code snippets omitted:
class MyComponent extends Component {
justWarn(input) {
console.warn(input);
// do something with `this` as well
}
render() {
return (
<View>
{this.props.myText}
</View>
);
}
}
const mapStateToProps = () => {
// Call the getText function here
return {
myText: getText()
};
}
export default connect(mapStateToProps)(MyComponent);
Now the function getText is defined in some other file, and looks like this:
function getText() {
// Let's assume it returns hard-coded value for the sake of brevity
return (
<Text>
<Text>I am the first part</Text>
<Text
onPress={function(){
// I want to call the function that is defined inside MyComponent
// since this Text will eventually be a part of MyComponent
this.justWarn('Warn me in the yellow box')
}}
>I am the clickable part
</Text>
</Text>
);
}
When I try to call the justWarn method defined inside the MyComponent from the Text as defined above, I get an error undefined is not a function, evaluating this.justWarn.
My question is, I am not using the arrow function, and as such this is not bound on when I declare the onPress handler. It is actually called when Text is a part of MyComponent, so shouldn't this correspond to MyComponent and code above should work fine?
What am I doing wrong here? Is there any way to achieve this by keeping the getText and MyComponent split in two files?
Thanks.

Answer 1

The problem is getText does not have this context so you need to bind it in someway that it gets the context.
One way to achieve this is by changing MyComponent like this-
class MyComponent extends Component {
justWarn(input) {
console.warn(input);
alert(input)
// do something with `this` as well
}
render() {
const myText = this.props.myText.bind(this)
return (
<View>
<Text>something should render</Text>
{myText()}
</View>
);
}
}
const mapStateToProps = () => {
// Call the getText function here
return {
myText: getText
};
}
export default connect(mapStateToProps)(MyComponent);
...
and then using arrow function in onPress event handler like this -
function getText() {
// Let's assume it returns hard-coded value for the sake of brevity
return (
<Text>
<Text>I am the first part</Text>
<Text
onPress={() => {this.justWarn('Warn me in the yellow box')}}
>I am the clickable part
</Text>
</Text>
);
}
...
Hope it helps.