I have this table which is created using data from my back end
JavaScript
x
9
1
<Table
2
style={{ marginBottom: "100px" }}
3
dataSource={students}
4
columns={colums}
5
rowKey="studentId"
6
pagination={false}
7
/>
8
9
And its columns are made with this function
JavaScript
1
47
47
1
const colums = [
2
{
3
title: "",
4
Key: "avatar",
5
render: (text, student) => (
6
<Avatar size="large" style={{ backgroundColor: "orange" }}>
7
{`${student.firstName.charAt(0).toUpperCase()}${student.lastName
8
.charAt(0)
9
.toUpperCase()}`}
10
</Avatar>
11
),
12
},
13
{
14
title: "studentId",
15
dataIndex: "studentId",
16
Key: "studentId",
17
},
18
{
19
title: "firstName",
20
dataIndex: "firstName",
21
Key: "firstName",
22
},
23
24
{
25
title: "lastName",
26
dataIndex: "lastName",
27
Key: "lastName",
28
},
29
{
30
title: "email",
31
dataIndex: "email",
32
Key: "email",
33
},
34
35
{
36
title: "Gender",
37
dataIndex: "gender",
38
Key: "gender",
39
},
40
{
41
title:"",
42
Key:"buttom",
43
render:()=>(<Button onClick={()=>deleteStudent()}>hello</Button>)
44
45
}
46
];
47
I added a button which calls the deleteStudent function and sends it to my Backend
JavaScript
1
10
10
1
export const deleteStudent= (studentId)=>
2
3
fetch(`http://localhost:1020/api/students/${studentId}`,{
4
method:'DELETE',
5
headers:{
6
'Content-Type': 'application/json'
7
}
8
9
}).then(checkStatus);
10
but I don’t know how to pass the studentId for the specific row
this is my initial state
JavaScript
1
6
1
state = {
2
students: [],
3
isFetching: false,
4
isAddStundetModalVisible: false,
5
};
6
Advertisement
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
JavaScript
1
2
1
(value, record)=>(<Button onClick={()=>deleteStudent(record.studentId)}>hello</Button>
2