React - onClick() 事件不会在地图函数中显示被点击的项目信息

Question

I have data that render all items in the list. And there is a nav button works onClick and shows 2 option (edit, remove). And the problem is when I click an item nav button it shows all of the items' options. It has to trigger only one item's onClick function

const [drawerIsOpen, setDrawerIsOpen] = useState(false);

    const closeDrawer = () => {
        setDrawerIsOpen(false)
    }

    const openDrawer = () => {
        setDrawerIsOpen(true);
    }

Below is rendered items

bikes.map(bike => {
        <div className="bike-item">
               <small> {bike.title} </small>
        </div>
        <div onClick={()=> openDrawer(bike.id)} className="bike-item__actions_nav">
               <i className="fas fa-ellipsis-v"></i>
        </div>
        <div className={`bike-item__children_actions ${drawerIsOpen && 'visible'}`}>
               <Link to={`/update/${bike.id}`} className="bike-item_actions_icon">
                  Edit
               </Link>
              <Link className="bike-item_actions_icon">
                  Remove
              </Link>
              {drawerIsOpen && <Backdrop transparent onClick={closeDrawer} />}
        </div>

I know there is a problem with the item's index but practically couldn't solve it.

Here is example: https://codesandbox.io/s/laughing-fast-swf1o?file=/src/App.js

Answer 1

You need to filter the bikes when you call the openDrawer function.

Say you have state filteredBikes which initially will be equal to all of your bikes.

Then when you pass the id of the chosen bike into the openDrawer you need to update this state based on the current state of filteredBikes , choosing the bike whose id equals to the passed.