I am new to using React and I am encountering some issues. My goal is to add an active class when any of these components are opened. I have attempted a solution but it isn't working as expected. I need assistance in adding a background color to the divs with the className 'menu__iconsRight' when they are active. Any help would be greatly appreciated. Thank you.
const App = () => {
const[isStyleOpen, setIsStyleOpen]=React.useState(false)
const[isRectOpen, setIsRectOpen]=React.useState(true)
const[isHairOpen, setIsHairOpen]=React.useState(false)
function openHair(){
setIsHairOpen(true)
}
function closeHair(){
setIsHairOpen(false)
}
function openRect(){
setIsRectOpen(true)
}
function closeRect(){
setIsRectOpen(false)
}
function openStyle(){
setIsStyleOpen(true)
}
function closeStyle(){
setIsStyleOpen(false)
}
return (
<div className='menu'>
<div className='menu__iconsRight ' >
<img onClick={() => setIsRectOpen(!isRectOpen)}
src="./images/icons/win.png"/>
{isRectOpen ? <Rect />: null}
</div>
<div className={`?active: 'menu__iconsRight' `} >
<img onClick={() => setIsStyleOpen((isStyleOpen) =>
!isStyleOpen)}
src="https://winaero.com/blog/wp-content/uploads/2017/07/Co-win--
icon.png"/>
{isStyleOpen ? <Style closeStyle={closeStyle} />: null}
</div>
<div className='menu__iconsRight '>
<img onClick={() => setIsHairOpen(!isHairOpen)}
src="./images/icons/at.png"/>
{isHairOpen ? <Hair closeHair={closeHair} />: null}
</div>
)
}
export default App