I'm new to react and I'm trying to understand how it's working.
I have 2 select inputs and on change event I want to filter the other's select values based on the first one.
After calling setOptions with the filtered values, they are always one step behind - so I have the previous value each time.
I understand that useState is async and I tried with and useEffect (() => {}, [options])
and I still have the previous values in options.
const [options, setOptions] = useState<any>()
const filterOptions = (ids: string[]) => {
const filteredOptions = list.filter(item=> {
return list.includes(item.id)
})
setOptions(filteredOptions)
}
I think your primary problem is from the logic itself. list.includes(item.id) is checking item.id on list that always returns true.
You can modify it to ids.includes(item.id)
const [options, setOptions] = useState<any>()
const filterOptions = (ids: string[]) => {
const filteredOptions = list.filter(item => {
return ids.includes(item.id)
})
setOptions(filteredOptions)
}
Shorter version
const [options, setOptions] = useState<any>()
const filterOptions = (ids: string[]) => {
const filteredOptions = list.filter(item => ids.includes(item.id))
setOptions(filteredOptions)
}