Change data in row, that has been rendered by cloneWithRows - reactjs

Question

I want to implement something like facebook 'like' functionality on some posts, but I haven't understood what should I do in order to mutate the data from datasource, and re-render a specific row, based on user pressing a button, basically a counter.
This is my code:
export default class PrivateFeedList extends Component {
constructor(props) {
super(props);
var ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 != r2
})
this.state = {
datasource: ds.cloneWithRows( [] ),
refreshing: false
}
componentWillMount() {
this.fetchPrivateFeed()
}
_onRefresh() {
this.setState({refreshing: true});
this.fetchPrivateFeed()
.then(() => {
this.setState({refreshing: false});
});
}
render() {
return(
<View style= {styles.container}>
<ListView
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this._onRefresh.bind(this)}
/>
}
dataSource={this.state.datasource}
renderRow={this.renderRow.bind(this)}
/>
</View>
)
}
fetchPrivateFeed() {
fetch('http://000.111.22.333:3000/', {
method: 'GET',
headers: {
'Authorization': 'id_token ' + token
}
})
.then((response) => response.json())
.then((feedItems) => {
console.log(feedItems)
this.setState({
datasource: this.state.datasource.cloneWithRows(feedItems)
});
})
}
renderRow(rowData) {
return(
<View style={styles.cardWrapper}>
<Text>{rowData.numberOfLikes}</Text>
{this.props.showLikeButton
? <Button onPress={()=> this.handleLikePress(rowData)}>
{this.hasUserLiked(rowData)
? <Text>LIKED</Text>
: <Text>LIKE!!</Text>
}
</Button>
: null
}
</View>
)
}
hasUserLiked(transaction) {
let result = false;
//userLiked is an array that contains all the usernames that have
liked the transaction. We cycle through this array, to check if the
present user is within the array, meaning that he has already liked
the transaction.
_.each(transaction.userLiked, function(userLikedItem) {
//has the user liked ? true or false
result = user.userName === userLikedItem;
})
return result;
}
handleLikePress(rowData) {
//Increase the numberOfLikes counter
//Push present user's username into the userLiked array.
//Re-render row.
}
I want to do the last 3 things I have written in the comments at the handleLikePress().

Answer 1

You do not mutate the dataSource instead you again populate the dataSource with new rows
handleLikePress(rowData) {
//Increase the numberOfLikes counter
//Push present user's username into the userLiked array.
this.setState({dataSource: this.state.dataSource.cloneWithRows(
newDataSource,
)});
}