react native - react context like icon action - react-native

Question

I am currently storing my user using react context, each user can like as many posts as they want.
i have a parameter called isLiked in my backend that can either be true or false for each post for each user.
Here is my code:
I attempted a solution, my problem is that when i press the outlined heart to like a post it changes to a heart and a record of this like is sorted in my database but when i close the post and open it again it does not change, i need to refresh app in order for it to change.
attempted solution
Postdetailsscreen.js
const post=route.params;
const [addedToLikes, setAddedToLikes] = useState(post.isLiked);
const addToLikes = (PostId,userId) => {
setAddedToLikes(!addedToLikes);
likePost({PostId,userId});
};
<TouchableOpacity
onPress={() => {
addToLikes(post.id,user.id);
}}
>
{addedToLikes ?
<MaterialCommunityIcons
name="heart"
/>
:
<MaterialCommunityIcons
name="heart-outline"
/>}
</TouchableOpacity>
in my backend i have an isLiked parameter that if the current userId and postId are found in my likes table then isLiked is true otherwise false.
here is my backend code:-
router.get("/",
auth,
async (req, res) => {
const posts = await Post.findAll({
order: [["createdAt", "DESC"]],
include: [
{ model: User, attributes: ["id", "name", "email"] },
{ model: Post_Image, attributes: ["id", "images"] },
]})
if (!posts) return res.status(404).send();
const baseUrl = config.get("assetsBaseUrl");
const plainPosts = posts.map((x) => x.get({ plain: true }));
const resultPosts = [];
for (const post of plainPosts) {
const isLiked = post.Likes.some(x => x.userId === req.user.id);
const { Post_Images, ...postAttributes } = listing;
const IMAGES = Post_Images.map((postImage) => ({
url: `${baseUrl}${postImage.images}_full.jpg`,
thumbnailUrl: `${baseUrl}${postImage.images}_thumb.jpg`,
}));
resultPosts.push({ ...postAttributes, images: IMAGES
,isLiked
});
}
res.send(resultPosts);
});
Can someone help me with that if a user liked a post the icon stays filled even without refreshing the app?

Answer 1

Assuming you are getting the props from parent component.
const Heart = ({ isLiked }) => {
const [ liked, setLiked ] = useState(false);
useEffect(() => {
setLiked(isLiked)
},[isLiked])
......
}
use useEffect to make sure you update your state whenever the isLiked prop changes.
Then in your parents component.
const ListofPost = () => {
const data = fetchTheData(url);
....
return ( data.map( item => <Heart isLiked={item.isLiked} />) )
}