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

2

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

answered Oct 6, 2022 at 18:30

Tung Pham

5874 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rohit Verma Over a year ago

can we pass title here with id ?

Tung Pham Over a year ago

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

1

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:

answered Oct 6, 2022 at 18:34

Terry

66.7k16 gold badges107 silver badges127 bronze badges

2 Comments

Rohit Verma Over a year ago

How can I get the title when I clicked on delete button?

Terry Over a year ago

@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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related