React Native ES6 Syntax: Undefined is not an object - reactjs

Question

I tried out the following example (Fading Hearts) from React Native Playground:
https://rnplay.org/apps/CkBOBQ
The example is written in createClass syntax. I converted the same to ES6 syntax where I used classes and methods. The app compiles and opens properly but when I tap on the app, it throws this error:
Undefined is not an object (evaluating '_this3.state.hearts[i].right')
There is also a warning:
Warning: setState(...): Cannot update during an existing state transition
Part of the code is shown below. If I remove the line onComplete={this.removeHeart(v.id)}, there is no error or warning. But this only because we are not properly destroying the heart object. Could someone point out what I'm doing wrong?
class App extends Component {
constructor(props) {
super(props);
this.state = {hearts: []}
this.addHeart = this.addHeart.bind(this);
this.removeHeart = this.removeHeart.bind(this);
}
addHeart() {
startCount += 1;
this.state.hearts.push({
id: startCount,
right: getRandomNumber(50, 150)
});
this.setState(this.state);
}
removeHeart(v) {
var index = this.state.hearts.findIndex((heart) => heart.id === v);
this.state.hearts.splice(index, 1);
this.setState(this.state);
}
render() {
return (
<View style={styles.container}>
<TouchableWithoutFeedback style={styles.container} onPress={this.addHeart}>
<View style={styles.container}>
{
this.state.hearts.map((v, i) =>
<AnimatedHeart
key={v.id}
onComplete={this.removeHeart(v.id)}
style={{right: this.state.hearts[i].right}}
/>
, this)
}
</View>
</TouchableWithoutFeedback>
<Text style={styles.message}>Tap anywhere to see hearts!</Text>
</View>
);
}
}

Answer 1

you are actually invoking the function with your current code. You need to give a function reference to trigger and not actually invoke the function. meaning
onComplete={this.removeHeart(v.id)}
should be this
onComplete={() => this.removeHeart(v.id)}
when the render cycle goes off it calls the removeHeart function which ends up calling setState while the render is happening cannot set state in a transition

Answer 2

You are passing argument to removeHeart in the wrong manner
<View style={styles.container}>
{
this.state.hearts.map((v, i) =>
<AnimatedHeart
key={v.id}
onComplete={this.removeHeart.bind(this,v.id)}
style={{right: this.state.hearts[i].right}}
/>)
}
</View>
and there is no need to pass this to map when you use the arrow function notation