Reactjs 按下时在react中切换div可见性

我有一个包含这两个元素和两个图标的侧栏：

当我按下葡萄糖时，我希望第二个图标出现或停留，当我按下SPO2时，我希望第二个图标消失

这是我的密码：

function SidebarItem({name,title,selected,onSelect}) {

    const style={
        cursor: "pointer",
    };

    return (
        <div className="item">Glucose</div>
        <div className="item">SPO2</div>
<div className="sidebar-icons-container">
            <div className="icon-setting"><FontAwesomeIcon icon={faCog}/></div>
            <div>
            <div className="icon-dashboard"><FontAwesomeIcon icon={faIndent}/></div>    
            </div>
      </div>
        </div>
    )

}
export default SidebarItem;

---

可以维护状态并有条件地呈现图标。在单击相应的侧栏项目时更新状态

函数SidebarItem{name，title，selected，onSelect}{ const[shouldDisplay，setDisplay]=useStatetrue； 常量样式={ 游标：指针， }; 回来 setDisplaytrue；}>葡萄糖 setDisplayfalse；}>血氧饱和度 {shouldDisplay？：null} } 导出默认SidebarItem；

---

到目前为止您尝试了什么？您可以阅读有关useState钩子的内容。这就是完成此任务所需的。您需要状态和onClick处理程序来更改状态。React中的状态有很多形状和形式，但是在您的用例中，一个带有本地状态的功能组件useState钩子将是一个不错的选择。