DEV Community

Discussion on: React Props complete guide for beginners

Collapse
 
brense profile image
Rense Bakker

Oh and your darkMode / lightMode definitions seem like a lot of duplication of code... Why not just do something like this?:

function ToggleButton(props){
  return <i
    className={`fa-solid ${props.icon} ${props.isActive ? 'toogle-active' : 'toogle-inactive'}`}
    onClick={tooglemode}
  />
}

function Toggle(){
  return <div className="toogle">
    <ToggleButton isActive={!dark} icon="fa-moon">
    <ToggleButton isActive={dark} icon="fa-sun">
  </div>
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
suchintan profile image
SUCHINTAN DAS

Right Rense, this would be a better approach to implement that feature. I haven't really thought about implementing it in that manner.

Really appreciate you efforts for sharing this amazing approach with the community 🙂.