I am working on a social media application using React and Redux, where users can post, like, and comment on posts.
I encountered an issue where the application is throwing errors related to undefined properties when rendering the PostWidget component. The error messages suggest that properties of postId and 64e45117bb2cf4e863c94ba6 (which is a user ID) are undefined.
Here's an overview of the code related to the components and Redux slice:
PostWidget.js: This component displays a single post, including its description, likes, and comments. It also handles liking a post.
PostsWidget.js: This component is responsible for rendering multiple PostWidget components based on the data fetched from the server. It passes the necessary props to each PostWidget.
authSlice.js: This is your Redux slice that manages the state related to authentication, including the user, token, and posts.
Can anyone please help me solve this?
What I have tried:
I confirmed that I am passing the postId and postUserId as props to the PostWidget component in the PostsWidget component.
I verified that the postId is being logged correctly in the console using the console.log() statement in the patchLike function of the PostWidget.
I checked the network tab in my browser's developer tools and found that the server is responding with the correct data for the new post I've created.
I ensured that the setPosts reducer in my Redux slice is correctly updating the state with the new posts data.
I checked the authSlice reducer to ensure that it's updating the posts state as expected.
Despite these steps,I am still facing the issue, and the PostWidget component is throwing errors when trying to access properties related to postId and 64e45117bb2cf4e863c94ba6.