rare-sapphire•5mo ago

UseSelect and Select No Data Although It Has Data

const { options } = useSelect<CompanySize>({ resource: "CompanySize/GetCompanySizes", optionLabel: "size", optionValue: "id", }); return ( <List> <Select style={{ width: 200 }} placeholder="Company Size" {...options} /> </List> ); interface CompanySize { id: number; size: string; } I got no data on antd Select component but I got data on useselect.

2 Replies

kapa.ai•5mo ago

Hi @CVas. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It looks like there might be a misunderstanding in how to properly spread the selectProps from the useSelect hook into the Ant Design Select component. The useSelect hook provides selectProps which should be spread into the Select component, not options. Here is the corrected version of your code:

import { useSelect } from "@refinedev/antd";  
import { Select } from "antd";  
import { List } from "@refinedev/core"; // Assuming List is imported from refine

interface CompanySize {  
  id: number;  
  size: string;  
}  

const CompanySizeSelect: React.FC = () => {  
  const { selectProps } = useSelect<CompanySize>({  
    resource: "CompanySize/GetCompanySizes",  
    optionLabel: "size",  
    optionValue: "id",  
  });  

  return (  
    <List>  
      <Select  
        style={{ width: 200 }}  
        placeholder="Company Size"  
        {...selectProps}  
      />  
    </List>  
  );  
};

import { useSelect } from "@refinedev/antd";  
import { Select } from "antd";  
import { List } from "@refinedev/core"; // Assuming List is imported from refine

interface CompanySize {  
  id: number;  
  size: string;  
}  

const CompanySizeSelect: React.FC = () => {  
  const { selectProps } = useSelect<CompanySize>({  
    resource: "CompanySize/GetCompanySizes",  
    optionLabel: "size",  
    optionValue: "id",  
  });  

  return (  
    <List>  
      <Select  
        style={{ width: 200 }}  
        placeholder="Company Size"  
        {...selectProps}  
      />  
    </List>  
  );  
};

In this corrected version, selectProps is spread into the Select component, which should properly bind the options fetched by the useSelect hook to the Select component. For more information, you can refer to the useSelect documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-select/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@334335533809664010> kapa.ai is still learning and improving, please let us know how it did by reacting below

UseSelect and Select No Data Although It Has Data

Did you find this page helpful?