table-v7 and i'm trying to make a delete modal but i'm not sure how can i get the ids of my rows and set it in my axios request

this function is in a hook file, if i use row.original._id i can get the id but only works in my hook file

my problem is how can i send the property row.original._id to my function deleteButton in my button component file and set it in my axios request ?

const DeleteHooks = (hook) => {
    hook.visibleColumns.push((colums) => [
      ...colums,
      {
        id: 'delete',
        accessor: () => 'delete',
        Cell: ({row}) => <div onClick={(event) => event.stopPropagation()}>
          <TrashButton/>
          
        </div>
        
      }
    ]);
  };

My button component file

const TrashButton = (borrar) => {
  const [isModalOpened, setIsModalOpend, toggleModal] = trashHook();

  const deleteButton = async () => {
    await axios.delete(`Testing/api/resources?_id=${i need the id of the rows here}`);

    setIsModalOpend(false);
  };

  return <>
    <button className="btn btn-danger btn-sm" onClick={toggleModal}>
      <i className="fa fa-trash-can"></i>
    </button>
    <TrashModal 
      show={isModalOpened} 
      handleClose={() => setIsModalOpend(false)}
      handleConfirm={()=> deleteButton()}
    /> 
  </>;
};

export default TrashButton;

My modal file

const TrashModal = ({show, handleClose, handleConfirm}) => {
  return (
    <>
      <Modal show={show} onHide={handleClose} className="Trashmodal">
        <Modal.Header closeButton>
          <Modal.Title>Atención !!</Modal.Title>
        </Modal.Header>
        <Modal.Body>Confirm </Modal.Body>
        <Modal.Footer className="FooterTrash">
          <Button className="btn btn-sm" variant="secondary" onClick={handleClose} autoFocus={true}>Close</Button>          
          <Button className="btn btn-sm btn-primary" onClick={handleConfirm} autoFocus={true}>
            <i className="fa fa-check" aria-hidden="true"></i>Confirm</Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};

CodePudding user response：

You can pass the id through the props of the TrashButton component.

In your columns, you pass the id by calling <TrashButton id={row.original._id}/>. Like this:

Cell: ({row}) => <div onClick={(event) => event.stopPropagation()}>
   <TrashButton id={row.original._id}/>
</div>

Now your button component can access the id through its props.

const TrashButton = ({ id }) => {
  const [isModalOpened, setIsModalOpened] = useState(false);

  const deleteButton = async () => {
    await axios.delete(`Testing/api/resources?_id=${id}`);

    setIsModalOpened(false);
  };

  return <>
    <button className="btn btn-danger btn-sm" onClick={() => setIsModalOpened(true)}>
      <i className="fa fa-trash-can"></i>
    </button>
    <TrashModal 
      show={isModalOpened} 
      handleClose={() => setIsModalOpened(false)}
      handleConfirm={()=> deleteButton()}
    /> 
  </>;
};

export default TrashButton;

React docs: Passing props to a component