How to Call a Function inside a Render Class in React-native - reactjs

Question

I want to call a function inside an imported render class. I tried the following but no success.
class1.js
import class2 from "./class2";
export default class1 MainCategoriesScreen extends React.PureComponent {
renderItem({ item }) {
return <Class2 product={item}/>
}
changeCategoryId(id){
console.log(id);
}
render() {
return (
<FlatList
data={this.state.products}
renderItem={this.renderItem}
...
}
and for class2
render() {
return (
<Card style={{flex:1}}>
<CardItem cardBody button
onPress={this.changeCategoryId(product.id)}>
...
</CardItem>
...
}
export default withNavigation(class2 );
Also I tried these:
this.changeCategoryId(product.id)
this.changeCategoryId(product.id)
this.changeCategoryId.bind(product.id)
this.props.changeCategoryId(product.id)

Answer 1

You can pass the changeCategoryId method from class 1 to class 2 as a prop, and then call it like this.props.changeCategoryId():
// class 1
constructor(props) {
super(props);
...
this.renderItem = this.renderItem.bind(this);
this.changeCategoryId = this.changeCategoryId.bind(this);
}
renderItem({ item }) {
return <Class2 product={item}
changeCategoryId={this.changeCategoryId}/>
}
// class 2
render() {
return (
<Card style={{flex:1}}>
<CardItem cardBody button
onPress={this.props.changeCategoryId(product.id)}>
...
</CardItem>
...
Note that you need to bind both changeCategoryId and renderItem in class 1.

Answer 2

I recently had the same issue, just do this:
export default class1 MainCategoriesScreen extends React.PureComponent {
renderItem = ({ item }) => {
return <Class2 product={item} onPress={this.myfunction} />
}
myfunction = (id) => {
console.log(id);
}
render() {
return (
<FlatList
data={this.state.products}
renderItem={this.renderItem}
...
and
render() {
return (
<Card style={{flex:1}}>
<CardItem cardBody button
onPress={() => this.props.onPress(product.id)}>
...
</CardItem>
...

Answer 3

You can also try this:
renderItem = ({ item }) => {
return <Class2 product={item} onPress={id => this.myfunction(id)} />
}
myfunction(id) {
console.log(id);
}

Answer 4

renderItem({ item }) {
return <Class2 product={item}/>
}
You appear to be missing passing the prop into Class2, which will handle the changeCategoryId.
renderItem({ item }) {
return <Class2 changeCategoryId={this.changeCategoryId} product={item}/>
}
This means, Class2 will now have access to a prop, called changeCategoryId which will be Class1's changeCategoryId function.
Then in the render function within your Class2, you can do:
<CardItem cardBody button
onPress={() => this.props.changeCategoryId(product.id)}>
...