如何触发设置在变量中的过滤器 function？

Question

Hello i have a filter function that's set in a variable, but want to execute as soon as the user clicks the button. The function enableFilter has to check if the item.id matches the item.category and fire the filter as it is true. Can anyone help me with that? It is not necessary to filter two at a time. Only one filter at a time

Answer 1

You can store your filter condition id in a state variable, like this:

const [selectedItemId, setSelectedItemId] = useState(null);

Then change your filter cases based on selectedItemId , like:

const filteredCases = i18n('casesOverview.cases').filter(category => selectedItemId ? category.category.includes(selectedItemId) : true)

then update the button onClick props with setSelectedItemId as follows:

{i18n('casesOverview.categories').map((item, key) => (
              <ButtonOutline
                onClick={() => setSelectedItemId(item.id)}
                id={item.id}
                key={key}>{item.label}</ButtonOutline>
            ))
}
 <GridWideColumn>
     {filteredCases.map((item, key) => (
                <CardBrand
                  key={key}
                  text={item.teaser} href={item.link}
                  image={<Image src="" srcSet={item.coverImage} alt="" />}
                  brandImage={<Image src={item.clientLogo} alt="" />}
                  link={item.link}
                  client={item.client}
                  textInfo={item.category}
                />
      ))
     }