loading...

Explain React State & Props Like I'm Five

Shannon Crabill on March 22, 2020

markdown guide
 

Imagine a component is any person of us ..

You have your own inherited Characteristics from you parents (hair color , place of birth , ... ) .
You have no hands in them , you just have to accept them as they are ... these are called PROPS .

and you can Acquire some other Characteristics ( make exercise , eat well ,brush your teeth, ... ) .
These are called STATE

That's it ;)

 

Imagine you have a Star Wars lego kit. The Cantina would be the component, and the props would be the chairs and maybe some music instruments played by the musicians. There can be multiple Cantinas in the same planet, which have differents setup (two chairs, four musicians, ...).

Now, imagine that the Cantina is only opened the day. So you put a sign outside before going to bed indicating that this is time to close the bar. The fact that the sign is there or not (boolean) would be your state. Of course, only the bar manager would be able to change the state of this boolean (you don't want other's component like the Jedi temple to dicate when to open or close your bar, don't you?)

May the force be with you.

 

Let's suppose you are an elementary school kid and you have a lunchbox. Food in your lunchbox may change or vary like apples, oranges, bagel this is Props. And your lunchbox may be empty, half-full or full. This is your State of the lunchbox.

 

One of my friends once used this analogy:
Imagine you're in your room — that's our component.
The room has a closet (state) where you can put whatever you want, e.g. some jumper or blanket (objects), some money (other data types like integer), but there's also a switch that switches on and off the light in your room (boolean).
Now, imagine that you take the blanket out of the closet and bring it to the sofa — you have just passed the props! The blanket is the prop from your room to its child, the sofa.
Let me know whether this analogy works for you!

 

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.

 

Your in a house, food is delivered to your house. Food delivered outside the house is Props, it happens you dont like the food being delivered, you prepare your own food. You have control on the food you make. food you make in the house is State.

 

Okay kids stand in line and face me! Each of you has 3 cards, one blue, one yellow, and one, oh eww, pink!

Now that you're all in a line, look at the person at your right and the person to your left. Now, whenever someone on your right tells you to change your color, it's your job to change your color and to tell the person on your left what the new color!

OMG now you all have pink cards! Ewwww! Okay now person number 2 you change your card and, remember to tell the person on your left what you did. Wait for kids to pass their props. Now all of you are blue except person number 1!

 

To briefly add to the other comments...

Any given React component may keep track of its own state - so that's the "state" part of your question. For example, a "Calendar" component might keep the selected date and the view mode (e.g. week, month) as part of its state.

React components are often nested inside other react components. Often when you create a component inside of another one, you may wish to pass some information from your parent component to the child component you are creating. That's the "props" part of your question.

 

First what is really a five 😂

 

The React docs do a pretty good job of explaining props/state/most things, imo. I'd recommend giving them a read if you haven't already.

Keep in mind that "components" in React are nothing more than functions.

code of conduct - report abuse