0

I'm actually facing an issue where the setQuery is updating on the second click whereas the selected is updating instantly. I tried to use the prevState idea but still the issue persists.

interface queryProps {
  intensity: string;
  categoryId: string;
  coachId: string;
  minDuration: number;
  maxDuration: number;
}

const Filter=()=>{
const [selected, setSelected] = useState<any>(undefined);
const [query, setQuery] = useState<queryProps>({
    intensity: '',
    categoryId: '',
    coachId: '',
    minDuration: 0,
    maxDuration: 1000,
  });

useEffect(() => {
    setQuery(prev => ({
      ...prev,
      intensity: selected?.intensity || prev.intensity,
      categoryId: selected?.categoryId || prev.categoryId,
      coachId: selected?.coachId || prev.coachId,
      minDuration: selected?.minDuration || prev.minDuration,
      maxDuration: selected?.maxDuration || prev.maxDuration,
    }));
    console.log('selected ', selected);
    console.log('query ', query);
  }, [selected]);

return(
<>
 <Dropdown
          label="Intensity"
          data={intensityItem}
          onSelect={setSelected}
        />

</>
)

}
Sihle Socishe
  • 1
  • The state is updating, you just have your log in a spot where it's not useful. `setQuery` asks react to rerender the component, but it does not change the value in the local const `query` from the current render Therefore, `console.log('query ', query);` can only ever log out the old value, not the new value. If you'd like to verify that the component is rerendering, put your log statement in the body of the component. – Nicholas Tower Jun 19 '22 at 20:00
  • Wow, you are actually correct. Thanks for heads up. I didn't know this – Sihle Socishe Jun 19 '22 at 20:35

0 Answers0