When a prop is changing const is backing to its initial values

Question

I have this component which is a filter for a table..

handleSearch function is responsible to update const filters... its work perfectly when dataIndex props is the same, but when it changes, filters value is backing to it's initial value, an empty array.

I can't manage to resolve it, I've already console log everything.

import React, { useState, } from "react";
import { SearchOutlined } from "@ant-design/icons";
import { Select,  Button, Space } from "antd";

const TableFilter = (props) => {
  const {
    filterType,
    filterMode,
    filterOptions,
    FilterSelectOnFocus,
    dataIndex,
    setSelectedKeys,
    selectedKeys,
    confirm,
    clearFilters,
  } = props;

  const [filters, setFilters] = useState([]);
 

  const SelectFilter = (
    <Select
      style={{ width: 188, marginBottom: 8, display: "block" }}
      type={filterType}
      mode={filterMode}
      name={dataIndex}
      value={selectedKeys}
      optionFilterProp="children"
      placeholder={`Search ${dataIndex}`}
      onFocus={FilterSelectOnFocus}
      showSearch
      onChange={(value) => setSelectedKeys(value ? value : [])}
      getPopupContainer={(trigger) => trigger}
      notFoundContent
    >
      {filterOptions?.map((type, key) => (
        <Select.Option value={type.value} key={key}>
          {type.label}
        </Select.Option>
      ))}
    </Select>
  );

  const defaultFilterTypes = [
    {
      type: "select",
      element: SelectFilter,
    },
  ];

  const handleFilterType = () => {
    const type = defaultFilterTypes.find((types) => types.type === filterType);
    return type.element;
  };

  const handleSearch = () => {    
    
  
    console.log(filters) //is empty when dataIndex value change, when it's is the same it get the update value of the 75 line
    confirm();

    const newFilterValues = [...filters]
    
   
    const index = newFilterValues.findIndex(newValue => newValue.searchedColumn === dataIndex)
    

    if(index === -1){
      newFilterValues.push({ searchText: selectedKeys, searchedColumn: dataIndex})
    }
    else{
      newFilterValues[index] = {searchText: selectedKeys, searchedColumn: dataIndex}
    }

    setFilters(newFilterValues)
    
   
     
  }

  const handleReset = () => {
   
   console.log('reset');
    clearFilters();
    setFilters({ searchText: "" });
    setSelectedKeys([]);
  };

  return (
    <div style={{ padding: 8 }}>
      {handleFilterType()}
      <Space>
        <Button
          type="primary"
          onClick={() => handleSearch()}
          icon={<SearchOutlined />}
          size="small"
          style={{ width: 90 }}
        >
          Search
        </Button>
        <Button
          onClick={() => handleReset()}
          size="small"
          style={{ width: 90 }}
        >
          Reset
        </Button>
      </Space>
    </div>
  );
};
export default TableFilter;

Table Component

import React, { useEffect, useState } from "react";
import { Table } from "antd";
import { getTransactions } from "../../../../api/Transactions";
import { formatCnpjCpf, formatCurrency } from "../../../../utils/masks";
import TableFilter from "../../../../shared-components/ant-design/containers/TableFilters";
import { getPartnersAsOptions } from "../../../../api/Partners";

const Insider = (props) => {
  const [data, setData] = useState([]);
  const [paginationValues, setPaginationValues] = useState({
    current: 1,
    pageSize: 50,
    total: 0,
    position: ["topRight"],
  });

  const [partners, setPartners] = useState([{value: null, label: 'carregando...'}])

  const context = "insider";

  function getColumnSearchProps(
    dataIndex,
    filterType,
    filterMode,
    filterOptions,
    FilterSelectOnFocus
  ) {
    return {
      filterDropdown: ({
        setSelectedKeys,
        selectedKeys,
        confirm,
        clearFilters,
      }) => {
        return (
          <TableFilter
            dataIndex={dataIndex}
            filterType={filterType}
            filterMode={filterMode}
            filterOptions={filterOptions}
            FilterSelectOnFocus={FilterSelectOnFocus}
            setSelectedKeys={setSelectedKeys}
            selectedKeys={selectedKeys}
            confirm={confirm}
            clearFilters={clearFilters}
          />
        );
      },
    };
  }

  async function getPartners(){
      
     if(partners.length > 2){
       return
     }

     const response = await getPartnersAsOptions(paginationValues)
     setPartners(response.data)
     

  }

  const columns = [
    {
      dataIndex: ["transactionType", "desc"],
      title: "Tipo de Transação",
      sorter: true,
      key: "orderTransactionType",
      ...getColumnSearchProps("orderTransactionType"),
    },
    {
      dataIndex: "transactionDate",
      title: "Data Transação",
      key: "orderTransactionDate",
      sorter: true,
      ...getColumnSearchProps("orderTransactionDate"),
    },
    {
      title: "Nome origem",
      dataIndex: ["source", "name"],
      sorter: true,
      key: "orderSourceCustomerName",
    },
    {
      render: (render) => formatCnpjCpf(render.source.document.value),
      title: "Documento origem",
      key: "sourceCustomer",
      ...getColumnSearchProps("sourceCustomer", "select", "tags")
    },
    {
      title: "Nome destino",
      dataIndex: ["target", "name"],
      sorter: true,
      key: "orderTargetCustomerName",
    },
    {
      render: (render) => formatCnpjCpf(render.target.document.value),
      title: "Documento destino",
    },
    {
      render: (render) => formatCurrency(render.value),
      title: "Valor da transação",
      key: "orderValue",
      sorter: true,
      align: "right",
    },
    {
      render: (render) => formatCurrency(render.chargedTariff),
      title: "Tarifa",
      key: "orderChargedTariff",
      sorter: true,
      align: "right",
    },
    {
      render: (render) => formatCurrency(render.cost),
      title: "Custo",
      key: "orderCost",
      sorter: true,
      align: "right",
    },
    {
      render: (render) => formatCurrency(render.revenue),
      title: "Receita",
      key: "orderRevenue",
      sorter: true,
      align: "right",
    },
    {
      title: "Parceiro",
      name: "Parceiro",
      dataIndex: ["partner", "name"],
      key: "orderPartnerName",
      sorter: true,
      align: "center",
      ...getColumnSearchProps(
        "orderPartnerName",
        "select",
        "multiple",
        partners,
        getPartners)
    },
    {
      title: "id da transação",
      name: "id da transação",
      dataIndex: "id",
    },
  ];

  useEffect(function transactions() {
    async function fetchTransactions() {
      const response = await getTransactions(context, paginationValues);

      if (response) {
        const { data, pagination } = response;

        setData(data);
        setPaginationValues(pagination);
      }
    }
    fetchTransactions();
    // eslint-disable-next-line
  }, []);

  return <Table dataSource={data} columns={columns} />;
};

export default Insider;

Answer 1

You could move this piece of code

const [filters, setFilters] = useState([]);

In a higher level