Estou tentando bolar uma lógica de um toggle, que ativa/desativa uma espécie de filtro, porém agora preciso implementar uma nova funcionalidade nele, ele funciona assim, se eu click em um button de categoria, ele faz uma requisição, muda pra on (o que faz alguns itens serem renderizados em meu outro componente, passo via context api), se eu clico dnv, ele muda pra off e a renderização volta ao que era antes, o problema é, preciso implementa-lo para funcionar com mais de um button de categoria, ou seja, se eu clicar em uma categoria (ele fica on) e clicar em outra categoria (ele muda pra off), o que na verdade não deveria ocorrer.
function toggleFunc(serviceEndpoint, category) {
onClickCategoryFetch(serviceEndpoint, category);
setToggle((prevToggle) => !prevToggle);
}
return Object.values(typeCategory)
.slice(0, FIRST_FIVE_CATEGORY)
.map((category) => (
<button
type="button"
key={ `${category.strCategory}` }
data-testid={ `${category.strCategory}-category-filter` }
onClick={ () => toggleFunc(endpoint, category.strCategory) }
>
{category.strCategory}
</button>
));
}