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
exotic-emerald•10mo 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>
conscious-sapphire•10mo ago
Hello @quandrix_ was the answer sufficient for you? Best
exotic-emerald•10mo ago
Yup!