Delete a row from a table using and Id React

I have this table which is created using data from my back end

    <Table
                style={{ marginBottom: "100px" }}
                dataSource={students}
                columns={colums}
                rowKey="studentId"
                pagination={false}
              />

And its columns are made with this function

    const colums = [
        {
          title: "",
          Key: "avatar",
          render: (text, student) => (
            <Avatar size="large" style={{ backgroundColor: "orange" }}>
              {`${student.firstName.charAt(0).toUpperCase()}${student.lastName
                .charAt(0)
                .toUpperCase()}`}
            </Avatar>
          ),
        },
        {
          title: "studentId",
          dataIndex: "studentId",
          Key: "studentId",
        },
        {
          title: "firstName",
          dataIndex: "firstName",
          Key: "firstName",
        },

        {
          title: "lastName",
          dataIndex: "lastName",
          Key: "lastName",
        },
        {
          title: "email",
          dataIndex: "email",
          Key: "email",
        },

        {
          title: "Gender",
          dataIndex: "gender",
          Key: "gender",
        },
        {
          title:"",
          Key:"buttom",
          render:()=>(<Button onClick={()=>deleteStudent()}>hello</Button>)
         
        }
      ];

I added a button which calls the deleteStudent function and sends it to my Backend

export const deleteStudent= (studentId)=>

fetch(`http://localhost:1020/api/students/${studentId}`,{   
    method:'DELETE',
    headers:{
       'Content-Type': 'application/json'
    }
    
}).then(checkStatus);

but I don’t know how to pass the studentId for the specific row

this is my initial state

 state = {
    students: [],
    isFetching: false,
    isAddStundetModalVisible: false,
  };

Answer

Just use second params to get the studentId like this. This is the same when you render avatar. You can read more props in docs: https://ant.design/components/table/#Column

(value, record)=>(<Button onClick={()=>deleteStudent(record.studentId)}>hello</Button>

Advertisement

Answer