Generating a button for each row in ReactJs

Question

I am trying to generate a delete button for the Action column in each row that is being generated in following table using react. How can I achieve that?

<Table>
    <thead>
     <tr>
     <th>
      Id
     </th>
     <th>
      Description
     </th>
     <th>
      Protocol
     </th>
     <th>
      Last Seen
     </th>
      <th>
      Action
     </th>
     </tr>
     </thead>
     <tbody>
     {table.map((item) => (
      <tr key={item.id}>
     {Object.values(item).map((val) => (
        <td>{val}</td>
        ))}
      </tr>
    ))}
   </tbody>  
</Table>

Answer 1

here is the sample code

import React from "react";
const data = [1, 2, 3];


function Login() {
const deleteData = (dataId) => {
  console.log(dataId);
};
  return (
    <>
      <table>
        <thead>
          <tr>
            <th>Id</th>
            <th>Description</th>
            <th>Protocol</th>
            <th>Last Seen</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          {data.map((val) => (
            <tr key={val}>
              <td>{val}</td>
              <td>{"Desc"}</td>
              <td>{"Prot"}</td>
              <td>{"Las"}</td>
              <td>
                {" "}
                <button onClick={() => deleteData(val)}>{"delete"}</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
}

export default Login;