Refresh table data when tabs are selected

Question

Refresh table data when tabs are selected

I am facing an issue with updating the state of a table based on status tabs selection in my application. I usually use useEffect to monitor the status tab selection and useState to update the table data. However, recently I encountered a problem where although the state is being updated (confirmed by logging the 'tableData' content right after calling setTableData), the table continues to display the previous 'tableData' state. Can anyone help me identify the root cause of this problem?

export const OrdersTab = (tabsData : any) => {
// console.log(tabsData);
const [activeTab, setActiveTab] : any = useState(null);
const [activeStatusTab, setActiveStatusTab] : any = useState();
const [tableData, setTableData]:any[] = useState([]);
const [loading, setLoading] = useState(false);

// console.log(tabsData);

useEffect(() => {
    
        if (activeStatusTab) {
            let filteredOrderes = tabsData.initTableData;
            // console.log(filteredOrderes);
            if (activeStatusTab == 'all') {
                filteredOrderes = tabsData.initTableData;
            } else {
                filteredOrderes = filteredOrderes.filter((orders:any) => 
                    orders.status.toString().toLowerCase().includes(activeStatusTab.toLowerCase())
                );
            }
            // console.log(filteredOrderes.length);
            setTableData(filteredOrderes);
            console.log(tableData.length); /* <<-- checking if state updating/not */
        }
}, [activeStatusTab]);

let statusTabs = [
    {
      id: "all",
      label: "All"
    },
    {
      id: "new",
      label: "New"
    },
    {
      id: "process",
      label: "On Process"
    },
    {
      id: "delivery",
      label: "Delivery"
    },
    {
      id: "completed",
      label: "Completed"
    },
    {
      id: "canceled",
      label: "Canceled"
    },
    {
      id: "failed",
      label: "Failed"
    },
];
return (
    <Card>
        <CardBody>
            <div className="flex w-full flex-col">
                <Tabs aria-label="Dynamic tabs" 
                    onSelectionChange={(tabKey) => setActiveTab(tabKey)}
                    fullWidth={true} 
                    items={tabsData.tabsData} >
                    {(item:any) => (
                    <Tab key={item.id} title={item.name}>
                        <Tabs aria-label="Options" onSelectionChange={(statusKey) => setActiveStatusTab(statusKey)} fullWidth={true} items={statusTabs}>
                            {(item) => (
                            <Tab key={item.id} title={item.label}>
                                    <Table id="tablexxx" aria-label="Example empty table">
                                        <TableHeader>
                                            <TableColumn>Product(s)</TableColumn>
                                            <TableColumn>Date</TableColumn>
                                            <TableColumn>Store</TableColumn>
                                            <TableColumn>Status</TableColumn>
                                            <TableColumn>Total Amount</TableColumn>
                                            <TableColumn>Courier</TableColumn>
                                            <TableColumn>Action</TableColumn>
                                        </TableHeader>
                                        {(tableData.length > 0) ? (
                                            <TableBody>
                                                {tableData.map((item:any) => (
                                                    <TableRow key={item.invoice}>
                                                        <TableCell>
                                                            <Link href={'/orders/' + item.id}>
                                                                {item.products[0].main_product.name}
                                                                <p className="text-default-400">SKU: {item.products[0].main_product.sku} x {item.products[0].qty}</p>
                                                                <p className="text-default-400">Invoice: {item.invoice}</p>
                                                            </Link>
                                                        </TableCell>
                                                        <TableCell>{item.createdAt.split('T')[0]}</TableCell>
                                                        <TableCell>{item.store.name}</TableCell>
                                                        <TableCell>{item.status}</TableCell>
                                                        <TableCell>{item.total_amount}</TableCell>
                                                        <TableCell>{item.logistic.name}</TableCell>
                                                        <TableCell>
                                                            {<Dropdown>
                                                                <DropdownTrigger>
                                                                    <Button 
                                                                    variant="bordered"
                                                                    isIconOnly  
                                                                    >
                                                                        <svg className="bi bi-three-dots-vertical" fill="currentColor" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/></svg>
                                                                    </Button>
                                                                </DropdownTrigger>
                                                                <DropdownMenu aria-label="Static Actions">
                                                                    <DropdownItem key="new">View</DropdownItem>
                                                                    <DropdownItem key="copy"><Link href={"/orders/" + item.id}>Process</Link></DropdownItem>
                                                                    <DropdownItem key="delete" className="text-danger" color="danger">
                                                                    Reject
                                                                    </DropdownItem>
                                                                </DropdownMenu>
                                                            </Dropdown>}
                                                        </TableCell>
                                                    </TableRow>
                                                ))}
                                            </TableBody>
                                        ) : (
                                            <TableBody emptyContent={"No rows to display."}>{[]}</TableBody>
                                        )} 
                                        
                                    </Table>
                            </Tab>
                            )}
                        </Tabs>
                    </Tab>
                    )}
                    
                </Tabs>
            </div>  
        </CardBody>
    </Card>
)}

javascript typescript next.js

Answer 1

Answer №1

Concern: When the function setTableData(filteredOrderes) is called, React updates the state asynchronously. Therefore, if you log the length of tableData right after calling setTableData, it will still display the old value because the state update has not been applied yet.

Solution:

Avoid logging the length of tableData directly after setTableData.
Instead, create a separate useEffect hook that triggers when tableData changes and log its updated value there.

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>
import { useEffect, useState } from 'react';

export const OrdersTab = (tabsData: any) => {
  const [activeTab, setActiveTab] = useState(null);
  const [activeStatusTab, setActiveStatusTab] = useState();
  const [tableData, setTableData] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);

  // Effect to filter table data based on selected status tab
  useEffect(() => {
    if (activeStatusTab) {
      let filteredOrders = tabsData.initTableData;
      
      if (activeStatusTab === 'all') {
        filteredOrders = tabsData.initTableData;
      } else {
        filteredOrders = filteredOrders.filter((orders: any) => 
          orders.status.toString().toLowerCase().includes(activeStatusTab.toLowerCase())
        );
      }

      // Update tableData state with filtered orders
      setTableData(filteredOrders);
    }
  }, [activeStatusTab, tabsData.initTableData]);

  // Effect to log the updated tableData when it changes
  useEffect(() => {
    console.log('Updated tableData length:', tableData.length);
  }, [tableData]); // This effect runs whenever tableData is updated

  let statusTabs = [
    { id: "all", label: "All" },
    { id: "new", label: "New" },
    { id: "process", label: "On Process" },
    { id: "delivery", label: "Delivery" },
    { id: "completed", label: "Completed" },
    { id: "canceled", label: "Canceled" },
    { id: "failed", label: "Failed" },
  ];

  return (
    <Card>
      <CardBody>
        <div className="flex w-full flex-col">
          <Tabs
            aria-label="Dynamic tabs"
            onSelectionChange={(tabKey) => setActiveTab(tabKey)}
            fullWidth={true}
            items={tabsData.tabsData}
          >
            {(item: any) => (
              <Tab key={item.id} title={item.name}>
                <Tabs
                  aria-label="Options"
                  onSelectionChange={(statusKey) => setActiveStatusTab(statusKey)}
                  fullWidth={true}
                  items={statusTabs}
                >
                  {(item) => (
                    <Tab key={item.id} title={item.label}>
                      <Table id="tablexxx" aria-label="Example empty table">
                        <TableHeader>
                          <TableColumn>Product(s)</TableColumn>
                          <TableColumn>Date</TableColumn>
                          <TableColumn>Store</TableColumn>
                          <TableColumn>Status</TableColumn>
                          <TableColumn>Total Amount</TableColumn>
                          <TableColumn>Courier</TableColumn>
                          <TableColumn>Action</TableColumn>
                        </TableHeader>
                        {tableData.length > 0 ? (
                          <TableBody>
                            {tableData.map((item: any) => (
                              <TableRow key={item.invoice}>
                                <TableCell>
                                  <Link href={'/orders/' + item.id}>
                                    {item.products[0].main_product.name}
                                    <p className="text-default-400">
                                      SKU: {item.products[0].main_product.sku} x {item.products[0].qty}
                                    </p>
                                    <p className="text-default-400">Invoice: {item.invoice}</p>
                                  </Link>
                                </TableCell>
                                <TableCell>{item.createdAt.split('T')[0]}</TableCell>
                                <TableCell>{item.store.name}</TableCell>
                                <TableCell>{item.status}</TableCell>
                                <TableCell>{item.total_amount}</TableCell>
                                <TableCell>{item.logistic.name}</TableCell>
                                <TableCell>
                                  <Dropdown>
                                    <DropdownTrigger>
                                      <Button variant="bordered" isIconOnly>
                                        <svg
                                          className="bi bi-three-dots-vertical"
                                          fill="currentColor"
                                          height="16"
                                          viewBox="0 0 16 16"
                                          width="16"
                                          xmlns="http://www.w3.org/2000/svg"
                                        >
                                          <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
                                        </svg>
                                      </Button>
                                    </DropdownTrigger>
                                    <DropdownMenu aria-label="Static Actions">
                                      <DropdownItem key="new">View</DropdownItem>
                                      <DropdownItem key="copy">
                                        <Link href={"/orders/" + item.id}>Process</Link>
                                      </DropdownItem>
                                      <DropdownItem key="delete" className="text-danger" color="danger">
                                        Reject
                                      </DropdownItem>
                                    </DropdownMenu>
                                  </Dropdown>
                                </TableCell>
                              </TableRow>
                            ))}
                          </TableBody>
                        ) : (
                          <TableBody emptyContent={"No rows to display."}>{[]}</TableBody>
                        )}
                      </Table>
                    </Tab>
                  )}
                </Tabs>
              </Tab>
            )}
          </Tabs>
        </div>
      </CardBody>
    </Card>
  );
};

Answer 2

Concern: When the function setTableData(filteredOrderes) is called, React updates the state asynchronously. Therefore, if you log the length of tableData right after calling setTableData, it will still display the old value because the state update has not been applied yet.

Solution:

Avoid logging the length of tableData directly after setTableData.
Instead, create a separate useEffect hook that triggers when tableData changes and log its updated value there.

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>
import { useEffect, useState } from 'react';

export const OrdersTab = (tabsData: any) => {
  const [activeTab, setActiveTab] = useState(null);
  const [activeStatusTab, setActiveStatusTab] = useState();
  const [tableData, setTableData] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);

  // Effect to filter table data based on selected status tab
  useEffect(() => {
    if (activeStatusTab) {
      let filteredOrders = tabsData.initTableData;
      
      if (activeStatusTab === 'all') {
        filteredOrders = tabsData.initTableData;
      } else {
        filteredOrders = filteredOrders.filter((orders: any) => 
          orders.status.toString().toLowerCase().includes(activeStatusTab.toLowerCase())
        );
      }

      // Update tableData state with filtered orders
      setTableData(filteredOrders);
    }
  }, [activeStatusTab, tabsData.initTableData]);

  // Effect to log the updated tableData when it changes
  useEffect(() => {
    console.log('Updated tableData length:', tableData.length);
  }, [tableData]); // This effect runs whenever tableData is updated

  let statusTabs = [
    { id: "all", label: "All" },
    { id: "new", label: "New" },
    { id: "process", label: "On Process" },
    { id: "delivery", label: "Delivery" },
    { id: "completed", label: "Completed" },
    { id: "canceled", label: "Canceled" },
    { id: "failed", label: "Failed" },
  ];

  return (
    <Card>
      <CardBody>
        <div className="flex w-full flex-col">
          <Tabs
            aria-label="Dynamic tabs"
            onSelectionChange={(tabKey) => setActiveTab(tabKey)}
            fullWidth={true}
            items={tabsData.tabsData}
          >
            {(item: any) => (
              <Tab key={item.id} title={item.name}>
                <Tabs
                  aria-label="Options"
                  onSelectionChange={(statusKey) => setActiveStatusTab(statusKey)}
                  fullWidth={true}
                  items={statusTabs}
                >
                  {(item) => (
                    <Tab key={item.id} title={item.label}>
                      <Table id="tablexxx" aria-label="Example empty table">
                        <TableHeader>
                          <TableColumn>Product(s)</TableColumn>
                          <TableColumn>Date</TableColumn>
                          <TableColumn>Store</TableColumn>
                          <TableColumn>Status</TableColumn>
                          <TableColumn>Total Amount</TableColumn>
                          <TableColumn>Courier</TableColumn>
                          <TableColumn>Action</TableColumn>
                        </TableHeader>
                        {tableData.length > 0 ? (
                          <TableBody>
                            {tableData.map((item: any) => (
                              <TableRow key={item.invoice}>
                                <TableCell>
                                  <Link href={'/orders/' + item.id}>
                                    {item.products[0].main_product.name}
                                    <p className="text-default-400">
                                      SKU: {item.products[0].main_product.sku} x {item.products[0].qty}
                                    </p>
                                    <p className="text-default-400">Invoice: {item.invoice}</p>
                                  </Link>
                                </TableCell>
                                <TableCell>{item.createdAt.split('T')[0]}</TableCell>
                                <TableCell>{item.store.name}</TableCell>
                                <TableCell>{item.status}</TableCell>
                                <TableCell>{item.total_amount}</TableCell>
                                <TableCell>{item.logistic.name}</TableCell>
                                <TableCell>
                                  <Dropdown>
                                    <DropdownTrigger>
                                      <Button variant="bordered" isIconOnly>
                                        <svg
                                          className="bi bi-three-dots-vertical"
                                          fill="currentColor"
                                          height="16"
                                          viewBox="0 0 16 16"
                                          width="16"
                                          xmlns="http://www.w3.org/2000/svg"
                                        >
                                          <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
                                        </svg>
                                      </Button>
                                    </DropdownTrigger>
                                    <DropdownMenu aria-label="Static Actions">
                                      <DropdownItem key="new">View</DropdownItem>
                                      <DropdownItem key="copy">
                                        <Link href={"/orders/" + item.id}>Process</Link>
                                      </DropdownItem>
                                      <DropdownItem key="delete" className="text-danger" color="danger">
                                        Reject
                                      </DropdownItem>
                                    </DropdownMenu>
                                  </Dropdown>
                                </TableCell>
                              </TableRow>
                            ))}
                          </TableBody>
                        ) : (
                          <TableBody emptyContent={"No rows to display."}>{[]}</TableBody>
                        )}
                      </Table>
                    </Tab>
                  )}
                </Tabs>
              </Tab>
            )}
          </Tabs>
        </div>
      </CardBody>
    </Card>
  );
};

Refresh table data when tabs are selected

Answer №1

Similar questions

Using JavaScript to parse an XML document on a WAMP server

I am experiencing an issue where tapping on the Status Bar in MobileSafari is not functioning correctly on a specific

I ran into yet another roadblock while attempting to set up my react application

What is the best way to extract and connect data from a JSON file to a dropdown menu in Angular 2+?

What is the most effective method for clearing the `useState` value stored in localstorage after adding new data to localstorage?

What are the best scenarios for implementing PHP(cURL) instead of JavaScript (Axios, Ajax, Fetch)?

Saving URLSearchParams to a file using javascript

A concise way to write an else if statement in Javascript and jQuery

Need help with Jquery JSON Request - I can successfully retrieve the Array but struggling to showcase it

Executing Client-Side Function Upon Data Retrieval in a Node.js Application

The offset values of $(element) keep increasing indefinitely when they are updated repeatedly

I encountered a problem when making multiple JSON calls within a for loop

Dealing with the percentage sign in table names during data retrieval

Struggling to load app.css, main.js, and other files while using an Express server

Intellisense in VS Code is failing to work properly in a TypeScript project built with Next.js and using Jest and Cypress. However, despite this issue,

Angular routing and parameters are not functioning as expected

What is the purpose of using detectChanges() when utilizing the default change detection strategy in Angular?

Error: The version of @ionic-native/[email protected] is not compatible with its sibling packages' peerDependencies

The $.ajax() method is unable to fulfill a request for retrieving JSON data from a static JSON file

What is causing Vuejs to not recognize the status of my button?