Sorry for the tongue twister of a title but its a very specific problem.
Currently I have a array of objects being past through by props. I'm trying to sum up all the 'score' values together and display it in my app.
The object looks like this:
[{'id': '1', 'score': '10'}, {'id': '2', 'score': '20'}, {'id': '3', 'score': '35'}]
And inside the app it is being called as followed:
state = {
content: this.props.navigation.getParam('content', false),
}
scoreCount = () => {
const content = this.state.content;
if (content) {
return content.reduce((prev, current) => prev.score + current.score);
} else {
return false;
}
render() {
const score = this.scoreCount()
return (
<View>
<Text>Score:</Text>
{ score ?
<Text>
{ score }
</Text> :
<Text>
0
</Text>
}
</View>
)}
It shows 'undefined35' on return
I know it has something to do with the props not being available on time of the call, but im not sure how to return it the score properly to the View
Any help would be very much appreciated