How to find out which row was clicked using React.js map function?

Question

I want to identify which row was clicked using React.js map function. I have a list where data coming from API. Now I have a delete and edit button with each row. How can I find on which row I clicked?

Demo: https://codesandbox.io/s/map-delete-edit-jeuyfz?file=/src/App.js

My code:

import React, { useState } from "react"; import { Button} from "@mui/material"; import "./styles.css"; const data =[ { "title": "title1", "IsActive": 1 }, { "title": "title2", "IsActive": 0 }, { "title": "title3", "IsActive": 1 }, { "title": "title4", "IsActive": 1 } ] export default function App() { const [data2, setData2] = useState(data); const deleteHandle = (i) =>{ console.log(i); } return ( <div className="App"> {data2 ? data2.map((val, i) => ( <div className="box" key={i}> <h2>{val.title}</h2> <Button onClick={deleteHandle}>Delete</Button> <Button>Edit</Button> </div> )) : ""} </div> ); }

pass the title or index or w/e as <Button onClick={()=>deleteHandle(val.title, i)}>Delete</Button> — KcH
– KcH, Commented Oct 6, 2022 at 18:31
it's just another argument ... const deleteHandle = (arg1, arg2 .... ) =>{ ... } where they are passed as <Button onClick={()=>deleteHandle(arg1, arg2, ....)}>Delete</Button> you can pass event as <Button onClick={(e)=>deleteHandle(e, arg1, arg2, ....)}>Delete</Button> — KcH
– KcH, Commented Oct 6, 2022 at 18:41

Tung Pham · Accepted Answer · 2022-10-06 18:30:07Z

Since you have the index and the val from the map function, you can pass it to the deleteHandler like so:

export default function App() { const [data2, setData2] = useState(data); const deleteHandle = (i) =>{ console.log(i); } return ( <div className="App"> {data2 ? data2.map((val, i) => ( <div className="box" key={i}> <h2>{val.title}</h2> <Button onClick={() => deleteHandle(i)}>Delete</Button> <Button>Edit</Button> </div> )) : ""} </div> ); }

This will allow you to access those and figure out which one was clicked

you can pass the title with val.title instead of i to deleteHandle, so instead of deleteHandle(i), it's deleteHandle(val.title). If you want both then deleteHandle(i, val.title) and modify deleteHandle to accept two parameters and use it

Terry · Accepted Answer · 2022-10-06 18:34:45Z

Your deleteHandler is missing some contextual information, which is actually available since you are interacting through the array with .map().

To identify which row is clicked on, simply pass an argument to the handler instead, i.e.

<Button onClick={() => deleteHandler(i)}>Delete</Button>

...where i is simply the index of the row you've clicked on.

To remove the element from your data, you can use functional updates where you simply copy the pre-existing data, splice out the entry by the received index i, and then return the mutated array:

const deleteHandler = (i) => { setData2(data => { const newData = [...data]; newData.splice(i, 1); return newData; }); };

See a proof-of-concept of your forked CodeSandbox example here:

@RohitVerma You can pass additional arguments to the function

Collectives™ on Stack Overflow

How to find out which row was clicked using React.js map function?

2 Answers 2

2 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Related