I am creating an items listing with categories.
I want to have it such that when user first visits the site, the default first category should be active, but at the moment, all items are appearing.
After clicking on particular category then item results are right.
You can check full codesandbox here.
2
Answers
Consider setting the initial state of
workitems
items to the first category:It’s because for the
workItems
state, you initialize it withuseState(workingList)
which contains all the items. Meanwhile, the filtering based on thecategory
happens only after aWorkList
element is clicked (which call thesetWorkItems
).My advice is to put the
active
state in the root directlyApp.js
, and remove theworkingItems
state. Instead, you can make it directly as a variable that is calculated during render. Also, for things that don’t change (likecategories
state here), you don’t need to put it insideuseState
.Codesandbox