I using Table from ant desing. I have question about how can i re-render table datasource when i update the state ? I add state to dataSource like :
<Table
rowKey="Id"
columns={columns}
dataSource={documents.Data}
className="w-full"
/>
And after i update my state like :
const UpdateDocument = (row) => {
let fakeList = { ...documents };
let item = fakeList.Data.find((x) => x.Id === row.Id);
let index = fakeList.Data.indexOf(item);
fakeList.Data[index] = row;
setDocuments(fakeList); //I update my state here.
};
But its not re-render table datasource. After i update my state shouldn't it re-render too ? Where do i make wrong ? Thanks for replies!
You are updating the same reference, you need to render a copy or your component will not render.
A working example based on your codesandbox:
import "./styles.css";
import React, { useState } from "react";
import { Button, Table } from "antd";
const fakeData = {
Data: [
{
Name: "Test 1",
isOpen: true
},
{
Name: "Test 2",
isOpen: true
},
{
Name: "Test 3",
isOpen: true
},
{
Name: "Test 4",
isOpen: true
}
]
};
export default function App() {
const [newData, setnewData] = useState(fakeData);
const changeState = () => {
const fakeItem = { Name: "Fake test", isOpen: true };
const newList = { Data: []};
const datas = fakeData.Data.map((data) =>
data.Name === "Test 3" ? fakeItem : data
);
newList.Data = datas;
setnewData(newList);
};
const columns = [
{
title: "Name",
dataIndex: "Name",
key: "name"
}
];
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<Table rowKey="Name" columns={columns} dataSource={newData.Data} />
<Button onClick={changeState}>Change State</Button>
</div>
);
}