I have a very large component, so I’ll try to show a portion of the code below that is important. But, essentially, when I attempt to remove a filter via a custom function that calls useState() I can see, via the console, that the state does indeed change, but the changes don’t present themselves.
const DraftClassExplorerHeader: React.FC<{ selectedFilters: any[] }> = (
props
) => {
let [selectedFilters, setSelectedFilters] = React.useState<any[]>(
props.selectedFilters
);
let globalState = React.useContext(DraftClassExplorerContext);
React.useEffect(() => {
setSelectedFilters(props.selectedFilters);
}, [props.selectedFilters]);
const removeFilter = (c: number) => {
let temp = selectedFilters;
temp.splice(c, 1);
globalState.setSelectedFilters(temp);
};
....
I’ve tried using useEffect()
within the removeFilter
function, but React is not a fan of that it seems. Any help greatly appreciated.
Edit: my question is definitely different from the proposed duplicate because I am asking explicitly about using React hooks here.