CODEWITHSUNDEEP
javascriptreactjsselectrenderingantd
Drashti Kheni
Drashti Kheni

Reputation: 1140

persist selected option in antd select in react js

I am developing one reactjs project in which I am using antd select component to show company list.

Selecting any company name will show users registered under that company name. Here, attached video is of root user who can enable/disable the company.

To enable/disable company, I am using antd switch which will call API and toggle the company state and when company state is changed, I need to again call the getCustomers API which will give me list of companies as company's state is rendered based on response from API.

Here, issue is that suppose I am selecting one option from select and toggles its state then get customers API will be called again and so first company will be the selected option in select component. I want to change it whenever state of any company is toggled then the same company should be selected after toggling.

See attached video for more clarification. Initially when Trace_Client_1 is selected option in and when I click TestOrg1 and toggle its state then after toggling TestOrg1 should be selected not Trace_Client_1.

I know this happens because of state rendering but can't figure out how to solve it.

see video

 useEffect(() => {
    const selectedCustomer = selectedCustomer
      ? selectedCustomer
      : customers[0] || {};

    fetchUsers(selectedCustomer.companyName);
    fetchLocations(selectedCustomer.companyName);
    setSelectedCustomer(selectedCustomer);
  }, [customers]);

 const toggleOrganizationVisiblity = async () => {
    const { message, res } = await Data.toggleOrganizationVisiblity(
      selectedCustomer?.companyName
    );

    if (res?.status === 401) {
      signout();
    }

    await fetchCustomers();
    DisplaySuccessMessage({ obj: { message } });
  };

const onChange = async (id) => {
    const selectedCustomer =
      customers.filter((customer) => customer.id === id)[0] || {};

    await fetchUsers(selectedCustomer.companyName);
    await fetchLocations(selectedCustomer.companyName);
    setSelectedCustomer(selectedCustomer);
  };

  return <>
     <CustomersList
        customers={customers}
        onChange={onChange}
        selectedCustomer={selectedCustomer}
      />
    <Switch
        checked={!selectedCustomer?.isCompanyDisabled}
        onChange={toggleOrganizationVisiblity}
        style={{ textAlign: 'right' }}
    />
    <Table
        size="small"
        style={{ marginTop: '10px' }}
        bordered
        dataSource={users}
        rowClassName={selectedCustomer?.isCompanyDisabled && 'disabled-row'}
        columns={columns}
    />
</>

Please help me in this as I am stuck in this since last 2 days.

Upvotes: 1

Views: 878

Answers (1)

bhargava.prabu
bhargava.prabu

Reputation: 708

Inside the useEffect, can you try to rename selectedCustomer to selectedCustomerReference and try to toggle the company

 useEffect(() => {
    const selectedCustomerReference = selectedCustomer
      ? selectedCustomer
      : customers[0] || {};

    fetchUsers(selectedCustomerReference.companyName);
    fetchLocations(selectedCustomerReference.companyName);
    setSelectedCustomer(selectedCustomerReference);
  }, [customers]);

Upvotes: 1

Related Questions