So im trying to open a menu but the problem is where I am showing the postMenu comp (Posts.js) is an array. So when I show the menu it shows up in all the posts
Posts.comp.js (Where im displaying the postMenu)
const dispatch = useDispatch();
const { isLoading, posts, ownerInfo, postsMenuIsOpen } = useSelector(
(state) => state.posts
);
// other code...
{posts &&
posts.map(({ textfield, image, ownerId }) => (
<div className="px-3 pt-2 pb-1 border border-gray-100 m-1">
<PostsMenu />
{ownerInfo &&
ownerInfo.map(({ _id, displayname, username, profilePic }) => (
<div>
// html code...
PostsMenu.comp.js (Where the code of menu is)
import React from "react";
import { useSelector } from "react-redux";
function PostsMenu() {
const { postsMenuIsOpen } = useSelector((state) => state.posts);
return (
<div
className={
postsMenuIsOpen ? `absolute w-[70%] bg-red-500 z-50` : `hidden`
}
>
PostsMenu
</div>
);
}
export default PostsMenu;
Please do let me know if you need more info.
Thanks in advance!