ao clicar no botão de curtir, ele esta curtindo todos ao invés de curtir apenas o do botão clicado
import React, { Component, useState, useEffect} from 'react';
import {
View,
Text,
Image,
ScrollView,
Dimensions,
StyleSheet,
FlatList,
Platform,
TouchableOpacity
} from 'react-native';
import Cabecalho from './Cabecalho'
import lerFotos from '../api/Feed'
export default function components() {
const [fotos, setFotos] = useState([])
const [likeado, setLikeado] = useState(false)
const [like, setLikes] = useState(likeado)
useEffect(() =>{
lerFotos(setFotos)
},[])
const getLike = (likeado) => {
if(likeado > 0 ){
return require("../assets/s2-checked.png")
}
return require("../assets/s2.png")
}
const curtitFoto = () => {
// console.warn(fotos)
let qnt = like
if (likeado) {
qnt--
} else {
qnt++
}
setLikes(qnt)
setLikeado(!likeado)
}
return (
<View style={styles.container}>
<FlatList
data={fotos}
keyExtractor={item => String(item.id)}
renderItem={fotos=>
<>
<Cabecalho
nomeUsuario={fotos.item.userName}
urlImagem={fotos.item.userURL}
/>
<Image source={{uri: fotos.item.url}} style={styles.img} />
<Text style={styles.description}>{fotos.item.description}</Text>
<View style={styles.containerLike}>
<TouchableOpacity onPress={curtitFoto}>
<Image source={getLike(likeado)} style={styles.like} />
</TouchableOpacity>
<Text>curtidas: {like}</Text>
</View>
</>
}
/>
</View>
);
}
const margin = Platform.OS === 'ios' ? 40 : 0
const largura = Dimensions.get("screen").width;
const styles = StyleSheet.create({
img:{
width: largura,
height: largura
},
container: {
marginTop: margin
},
like:{
width: 40,
height: 40,
margin: 10
},
description:{
margin: 10
},
containerLike:{
flexDirection: 'row',
alignItems: 'center'
}
})