Edit A Single Item and save formers data (FlatList) - react-native

Question

Hi I'm trying to make a "like" system as you can see on instagram -> when i press the heart it becomes red and full, and if I press it again it becomes again black and with outline. When I Press one heart other must stay with their actual style
, but I'm encountering this error. : initializeAnArray is not a function... Please can you help me.
If maybe you have a better way to code what i'am trying to do I don't refuse your tips. Thank You
const data = [
{
id: "1",
message: "Hi",
},
{
id: "2",
message: "Hello",
},
{
id: "3",
message: "Welcome",
},
];
function Heart(props) {
const [dataUser, setDataUser] = useState(data);
const [heart, setHeart] = useState(initializeAnArray("heart-outline"));
const [heartColor, setHeartColor] = useState(initializeAnArray("black"));
const [getIndex, setGetIndex] = useState(-1);
const initializeAnArray = (value) => {
let newArray = [];
for (let i = 0; i < dataUser.length; i++) {
newArray.push(value);
}
return newArray;
};
const editArray = (array, id, value) => {
array[id] = value;
return array;
};
const heartPress = (id) => {
setGetIndex(id);
if ((id = getIndex)) {
heartColor[id] === "red"
? setHeartColor(editArray(heartColor, id, "black")) +
setHeart(editArray(heart, id, "heart-outline"))
: setHeartColor(editArray(heartColor, id, "red")) +
setHeart(editArray(heart, id, "heart-outline"));
}
setHeartColor(editArray(heartColor, id, heartColor[id]));
setHeart(editArray(heart, id, heart[id]));
};
return (
<Screen>
<FlatList
data={dataUser}
extraData={dataUser}
renderItem={({ item }) => (
<View style={styles.container}>
<View style={styles.message}>
<Text>{item.message}</Text>
<TouchableOpacity onPress={heartPress(parseInt(item.id) - 1)}>
<MaterialCommunityIcons
name={heart[parseInt(item.id) - 1]}
size={12}
color={heartColor[parseInt(item.id) - 1]}
/>
</TouchableOpacity>
</View>
</View>
)}
/>
</Screen>
);
}
const styles = StyleSheet.create({
container: {
alignItems: "center",
},
message: {
flexDirection: "row",
marginBottom: 20,
},
});
export default Heart;

Answer 1

can you add keyExtractor={item => item.id} to your component FlatList and try again
something like this:
<FlatList
data={dataUser}
extraData={dataUser}
keyExtractor={item => item.id}
renderItem={({ item }) => (
<View style={styles.container}>
<View style={styles.message}>
<Text>{item.message}</Text>
<TouchableOpacity onPress={heartPress(parseInt(item.id) - 1)}>
<MaterialCommunityIcons
name={heart[parseInt(item.id) - 1]}
size={12}
color={heartColor[parseInt(item.id) - 1]}
/>
</TouchableOpacity>
</View>
</View>
)}
/>
https://reactnative.dev/docs/flatlist