Need help, page not reloading

Unanswered

ayush posted this in #help-forum

2023-09-09T09:46:39.000Z

I am using context and the page is not updating on value change and not even when i tried to use forced refresh
Below this are my three components that are not updating and I even added a custom state component to make it refresh on change and it still doesn't.

export default function Filters() {
  const context = useContext(FiltersContext);

  function remove() {
    context?.setArea(undefined);
    context?.setTech(undefined);
    context?.setExperience(undefined);
  }

  return (
    <div className="bg-slate-900 px-6 py-5 rounded-xl lmd:w-60 sticky top-12">
      <h3 className="text-left font-semibold text-lg sm:text-xl pb-4">
        Filters
      </h3>
      <div className="grid min-[450px]:grid-cols-2 sm:grid-cols-3 lmd:grid-cols-1 gap-4  ">
        {jobsdata.map((obj) => (
          <Filteritem {...obj} key={obj.placeholder as React.Key} />
        ))}
        <Button
          typeof="secondary"
          className="bg-slate-600 hover:bg-slate-700"
          onClick={() => remove()}
        >
          Remove filters
        </Button>
      </div>
    </div>
  );
}

2 Replies

@ayush I am using context and the page is not updating on value change and not even when i tried to use forced refresh Below this are my three components that are not updating and I even added a custom state component to make it refresh on change and it still doesn't. export default function Filters() { const context = useContext(FiltersContext); function remove() { context?.setArea(undefined); context?.setTech(undefined); context?.setExperience(undefined); } return ( <div className="bg-slate-900 px-6 py-5 rounded-xl lmd:w-60 sticky top-12"> <h3 className="text-left font-semibold text-lg sm:text-xl pb-4"> Filters </h3> <div className="grid min-[450px]:grid-cols-2 sm:grid-cols-3 lmd:grid-cols-1 gap-4 "> {jobsdata.map((obj) => ( <Filteritem {...obj} key={obj.placeholder as React.Key} /> ))} <Button typeof="secondary" className="bg-slate-600 hover:bg-slate-700" onClick={() => remove()} > Remove filters </Button> </div> </div> ); }

ayushOP

2023-09-09T09:47:08.000Z

export function FiltersContextProvider({ children }: { children: ReactNode }) {

const [filters, setFilters] = useState<FilterType>({
area: undefined,
tech: undefined,
experience: undefined,
});

const setArea = (value: string | undefined) => {
setFilters((prev) => ({ ...prev, area: value }));
};

const setTech = (value: string | undefined) => {
setFilters((prev) => ({ ...prev, tech: value }));
};

const setExperience = (value: string | undefined) => {
setFilters((prev) => ({ ...prev, experience: value }));
};

return (
<FiltersContext.Provider
value={{ ...filters, setArea, setTech, setExperience }}
>
{children}
</FiltersContext.Provider>
);
}

export default FiltersContext

ayushOP

2023-09-09T09:47:34.000Z

export default function Filteritem({ placeholder, data }: Props) {
const context = useContext(FiltersContext);
let change : (val: string) => void, val;
const [selectedValue, setSelectedValue] = useState<string | undefined>(
undefined
);

if (placeholder === "Area") {
change = (value: string) => {
context?.setArea(value);
setSelectedValue(value);
};
val = context?.area;
} else if (placeholder === "Technology") {
val = context?.tech;
change = (value: string) => {
context?.setTech(value);
setSelectedValue(value);
};
} else {
val = context?.experience;
change = (value: string) => {
context?.setExperience(value);
setSelectedValue(value);
};
}

return (
<Select
onValueChange={(value) => change(value)}
value={selectedValue}
>
<SelectTrigger className="w-full bg-gray-800">
<SelectValue placeholder={placeholder} />
</SelectTrigger>
<SelectContent className="bg-gray-800 text-white max-h-52 overflow-hidden">
{data.map((item: String) => (
<SelectItem
value={item.toLowerCase()}
className="focus:bg-blue-400"
key={item as React.Key}
>
{item}
</SelectItem>
))}
</SelectContent>
</Select>
);
}