How to change props object name when it's clicked in react?-CodePudding

I'm creating a youtube clone using react js and i used this icon

import HomeIconfilled from '@mui/icons-material/Home';
import HomeIcon from '@mui/icons-material/HomeOutlined';

That looks like this HomeIconfilled

which gets rendered by calling this function

        <Sidebariconfunc  Icon={HomeIconfilled} Title="Home"/>

That takes 2 parameters and reder the icon

function Sidebariconfunc({Icon,Title}) {


return (
    <div className='SidebarRow'>
           <div className='Sidebar_Icon'>
              <Icon/>
           </div>
             <div className='Slidebar_Title'>
                  {Title}
             </div>
    </div>
  )
}

How can i chane the props name to HomeIcon when i click on the icon so that it changes to this this icon HomeIcon Thamks !

CodePudding user response：

function SidebarIcon({ActiveIcon, InactiveIcon, title, isActive}) {
  return (
    <div className='SidebarRow'>
      <div className='Sidebar_Icon'>
        {isActive ? <ActiveIcon/> : <InactiveIcon />
      </div>
      <div className='Slidebar_Title'>{Title}</div>
    </div>
  )
}

Usage:

const [isActive, setIsActive] = React.useState(false)

return (
  <a onClick={() => setIsActive(!isActive)>
    <SidebarIcon
      ActiveIcon={HomeIconfilled}
      InactiveIcon={HomeIcon}
      title='Home'
      isActive={isActive}
    />
  </a>
)