UP and Down Arrow Icons functionality not working in Reactjs-CodePudding

Basically I need to show and Hide the div , Up and Down Arrow Icons should change accordingly. As of Now only UP arrow Icon is working and displaying the div , but when i try to hide the div, it is not working....I did like this and its not working , What wrong in my code? Can Anyone help me in this?

Here is my Code

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

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

CodePudding user response：

You can set the className like this

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

CodePudding user response：

The click handler is setting the state true everytime.

You should change it to <div onClick={() => setExpand(!expand)}>.

CodePudding user response：

you should change "i" tag to this:

<i className={${!expand ? "fas fa-chevron-down" : "fas fa-chevron-up"}}>