React中上下箭头图标功能异常：无法切换div的显示与隐藏

问题排查： #

• 点击事件逻辑错误：原代码点击时始终将expand设为true，仅能触发展开，无法实现关闭操作，需要改为切换状态。
• 图标类名逻辑错误：原代码同时保留fa-chevron-up并在特定条件添加fa-chevron-down，会导致两个图标类冲突，无法正确切换图标。

修改后的代码： #

const [expand, setExpand] = useState(false); 

<div onClick={() => setExpand(!expand)}> 
    Accordion 
    <i className={`fas ${expand ? 'fa-chevron-up' : 'fa-chevron-down'}`}></i>
</div>
{expand && <div className="Accordion-Section"></div>}

说明： #

1. 将点击事件改为setExpand(!expand)，实现点击切换expand的布尔值，从而控制面板的显示与隐藏。
2. 图标类名根据expand状态动态切换：展开时显示向上箭头（fa-chevron-up），收起时显示向下箭头（fa-chevron-down），避免类名冲突。

内容的提问来源于stack exchange，提问作者sundeep