Javascript 在react js（功能组件）中单击按钮时保持活动状态

我想停留在我点击按钮的区域，按钮也停留在背景和颜色中，显示你在哪里，例如早餐、午餐、晚餐或……区域

const Categories=（{Categories，filter}）=>{
返回(
{categories.map（（categorie，index）=>{
返回(
过滤器（分类）}
>
{categorie}
);
})}
);
};

---

为此，您必须在另一个状态中保存值，然后运行此映射方法

{categories.filter(name => name.includes(**anotherStatevalue**)).map((categorie, index) => {
        return (
          <button
            type="button"
            className="filter-btn"
            key={index}
            onClick={() => filter(categorie)}
          >
            {categorie}
          </button>
        );
      })}

{categories.filter（name=>name.includes（**anotherStatevalue**））.map（（categorie，index）=>{
返回(
过滤器（分类）}
>
{categorie}
);
})}

我不理解这个问题。当我单击例如“全部”按钮或“早餐”按钮时，按钮将处于活动状态，并在此部分向用户显示您的状态谢谢，在此组件中我应该使用useState吗？如何节约价值？

{categories.filter(name => name.includes(**anotherStatevalue**)).map((categorie, index) => {
        return (
          <button
            type="button"
            className="filter-btn"
            key={index}
            onClick={() => filter(categorie)}
          >
            {categorie}
          </button>
        );
      })}