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!

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!

• javascript
• reactjs
• react-native
• react-redux
• antd

• @Yushan sure : codesandbox.io/s/vibrant-thunder-i4hn8?file=/src/App.js – juniorFrontEndDD Commented Sep 11, 2021 at 10:44
• @Yushan as you can see state is changing but table view is still same. I want when i change state table view change too as i made. – juniorFrontEndDD Commented Sep 11, 2021 at 10:45
• I have a same issue too. My data es from firestore snapshot and the table is not re-rednering – juniortan Commented Mar 22, 2023 at 14:19

1 Answer 1

You are updating the same reference, you need to render a copy or your ponent 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>
  );
}