how to only display the information with matched id inside map method-CodePudding

I found myself stupid and could not get my head around with the logic.

I would like to show a few info triggered byonClick, and only those with matched id. For example, if I click on the button with id of 1, it would only want to show values in that specific object with id:1 like description, library, etc. Right now, all the data are displayed, and because I am using component in material ui, every drawer component are displayed on top of each other (overlapping). I know the reason causing this is because I have the drawer component inside the map method, but what could be potential solution?

Below are my simple code, The structure of my data looks like this,

export const projectdata = [
    {
        id: 1,
        title: "",
        subtitle: "",
        thumbnail: "",
        description:
            "",
        tech: [
        ],
        library: [""],
        WebsiteUrl: "",
        GitHubUrl: "",
    },
    ...more data with sequential id number...
]

Original:

    const handleDrawerOpen = (event) => () => {
        setOpen(!open);
    };
...
...
         <SwipeableDrawer
                 open={open}
                 onClose={handleDrawerOpen(false)}
                 onOpen={handleDrawerOpen(true)}>
               ***...only show data with matched id...***
         </SwipeableDrawer>

I have already map the array to display the data on webpage inside a div like this,

<div>
 { projectdata?.map(({ id, title, subtitle, thumbnail, description, tech, WebsiteUrl, GitHubUrl, library, index }) => (
      <>
         <Card>
          ...some info displayed here...

               <button onClick={handleDrawerOpen(id)}></button>
         </Card>
         <SwipeableDrawer>
               ***...only show data with matched id...***
         </SwipeableDrawer>
      </>
))}
<div>

One solution I can think of:

with useState(), pass in id as a prop

const [projectDetailId, setProjectDetailId] = useState(null);
const [projectDetailPage, setProjectDetailPage] = useState(false);

const handleDrawerOpen = (id) => {
     setProjectDetailId(id);
     setProjectDetailPage(true);
};
const handleDrawerClose = () => {
        setProjectDetailId(null);
        setProjectDetailPage(false);
};
...
...
{projectDetailId === id ? 
         <SwipeableDrawer
              open={projectDetailPage}
              onClose={handleDrawerClose}
         ></SwipeableDrawer>
         : null
}

However, this will trigger strange behavior of the drawer (lagging and no animation), especially with mobile device. Possibly due to this logic projectDetailId === id ? true : false.

CodePudding user response：

Ok, after your update, your problem is that you create multiple drawers, one for each id. When you click on open and set the open prop to true, all your drawers use this same prop so they all open.

You should move the Drawer out of the for and only create one, and send your object that has the id as a prop to the content of the drawer you have.

something like:

 const handleDrawerOpen = (yourData) => () => {
    setOpen(!open);
    setYourData(yourData)
 };
 
 ...

 // and somewhere on your code
 <SwipeableDrawer open={open}>
          
   <SomeComponentToShowTheData data={yourData}/>

 </SwipeableDrawer>