DEV Community

Discussion on: Explain React State & Props Like I'm Five

Collapse
 
rockykev profile image
Rocky Kev • Edited

I always love explainlikeimfive concepts - thanks for kicking off this convo.

Sometimes, knowing the explanation doesn't help with when it's developing time!

So to use some real-world react examples. Note, I'm going to assume hooks and ignore downward data flow to make this a bit easier to digest. If that doesn't make sense... just ignore for now!

Your web site has two states: a light mode and a dark mode.

You have a button on your site that is a light switch graphic (on/off). The light switch is a component. The on/off are two values that you can pass as props into the light switch component.


<Lightswitch light=true />

Inside your Lightswitch component, you can have a conditional that changes which mode.