CODEWITHSUNDEEP
javascriptreactjs
ramilabbaszade
ramilabbaszade

Reputation: 72

React - onClick() event don't show clicked item's information in map function

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

Upvotes: 2

Views: 254

Answers (1)

Yesset Zhussupov
Yesset Zhussupov

Reputation: 51

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.

Upvotes: 0

Related Questions