useSelect filter not working
Hello, I'm trying to filter the return of useSelect by using its filters prop. However, the output is not being filtered at all.
```javascript
const [skillLevel, setSkillLevel] = React.useState(0);
const { options } = useSelect<Spell>({
resource: "spells",
optionLabel: "name",
optionValue: "id",
filters: [
{
field: "level",
operator: "eq",
value: skillLevel
}
]
});
<Controller
name="spellLevel"
control={control}
defaultValue={0}
render={({ field }) => (
<FormControl>
<InputLabel>Spell Level</InputLabel>
<Select
{...field}
style={{ height: '50px', minWidth: '200px' }}
onChange={(e) => {
field.onChange(e);
setSkillLevel(e.target.value);
}}
>
{spellLevels.map((level) => (
<MenuItem key={level} value={level}>
{level}
</MenuItem>
))}
</Select>
</FormControl>
)}
/>
<Controller
name="spell"
control={control}
defaultValue=""
render={({ field }) => (
<FormControl>
<InputLabel>Spell</InputLabel>
<Select {...field} style={{ height: '50px', minWidth: '200px' }}>
{options
.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</Select>
5 Replies
Hi @quandrix_. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The
filters prop in the useSelect hook is used to filter the options you are showing. The filters will be passed to the getList method from the dataProvider as a parameter via the useList hook and used to send filter query parameters to the API.
Here is an example of how to use the filters prop in useSelect:
(Source: Refine Documentation (https://refine.dev/docs/api-reference/antd/hooks/field/useSelect/))
In your case, you are using the filters prop correctly. However, please note that dynamically changing the filters property will trigger a new request. This means that when you update the skillLevel state, it should trigger a new request with the updated filter.
If the output is not being filtered as expected, it could be due to the following reasons:
1. The dataProvider might not be handling the filter parameters correctly. Please ensure that your dataProvider is set up to handle filter parameters correctly.
2. The field in the filter might not match the actual field name in your data. Please ensure that the field name in the filter matches the actual field name in your data.
3. The operator in the filter might not be supported by your dataProvider. Please ensure that your dataProvider supports the eq operator for filtering.
If you are still facing issues, please refer to the Refine Documentation (https://refine.dev/docs/api-reference/antd/hooks/field/useSelect/) or the CrudFilters interface documentation (https://refine.dev/docs/api-reference/core/interfaceReferences/#crudfilters) for more information.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@223544018016010240> kapa.ai is still learning and improving, please let us know how it did by reacting below
correct-apricot•9mo ago
First realized I got my UIs mixed up. Changed useSelect to useList, but I ended up just removing the filter from the API call and instead just had the UI do the filtering. Less API calls overall that way.
```javascript
<Select {...field} style={{ height: '50px', minWidth: '200px' }}>
{spells
.filter((spell) => spell.level === skillLevel)
.map((spell) => (
<MenuItem key={spell.id} value={spell.id}>
{spell.name}
</MenuItem>
))}
</Select>
modern-teal•9mo ago
Hello @quandrix_ was the answer sufficient for you? Best
correct-apricot•9mo ago
Yup!