The One About React Props; Featuring the Rugrats
On your software engineering learning journey, there will be plenty of abstract ideas and concepts that can be difficult to wrap your head around at first and docs can be difficult to follow.
Personally, I try to personify the concept I’m learning to help me get a better grasp of what’s unfolding before my human eyes. I let the code tell me a story, allow the characters to evolve and learn something new through their lived experience.
With that being said, let’s learn a bit about props in React with the following excerpt from my millennial brain.
When little Thomas Malcolm Pickles has a question for his parent, Stu, he’s expecting an actual answer, not nullor undefined.
Tommy asks his dad, “Hey Dad, where do babies come from?” The question takes Hugh by surprise. He wasn’t ready to answer this question, after all, he had just finished fixing the Reptarmobile after weeks of repairs since it was damaged in the backyard during Hurricane Andrew.
“That’s a great question, Tommy. Why don’t you take Spike for a walk and when you come back we can talk about it.” Stu responds, hoping he can buy some time call up his parent, Lou Pickles, in hopes of finding an answer to Tommy’s question.
As soon as Tommy walks out the door with Spike, Stu picks up the phone and calls Lou.
“Dad, you have to help me answer this question for Tommy. He wants to know where babies come from! Can you help?” Stu frantically asks.
Lou is excited to get this call from Stu. He loves his son and his grandson and just lives to pass down stories from back in the day. He already has a story in mind to share with Stu.
“Well now, let me tell you a little story…” Lou begins to share a verbose story that will end up longer than it needs to be. He finishes his story just in the nick(elodeon) of time; Tommy has just returned from his walk with Spike. Stu can now call on the story passed down from his parent and relay that response to Tommy when he asks about it.
“Hey Dad, I’m back! So where do babies come from?” Tommy asks before the door even closes behind him.
Stu draws on the story that was passed down from his parent, Lou and returns it to Tommy. “Well now, let me tell you a little story…” Stu begins.
Okay… So how does this relate to Props??
Let’s analogize some pieces of the story. Tommy is an instance of the Rugrat.js component that wants to render an answer. The parent of Rugrat.js is Stu.js. The answer to the question lives in a function called giveKidsAdvice( ) which returns “Well now, let me tell you a little story…”
A Rugrat is born with the prop toughQuestion = {this.props.fathersHelp} so when Tommy wants an answer he will look to his props by calling props.toughQuestion and will find that the answer he is looking for lives within his parent’s props.
Tommy’s parent, Stu.js, will then check his props by calling this.props.fathersHelp and will find that that particular prop leads to a function called giveKidsAdvice( ), that lives with his parent, Lou.js.
Lou.js can pass down the giveKidsAdvice( ) method as props to both of his children Stu and Drew, so when Angelica asks her parent, Drew aprops.toughQuestion, he can pull the answer that was passed down to him through props from his parent, Lou.js.
I hope this helps solidify the concept of props in React. If it doesn’t, I hope you at least enjoyed the story. If you made it this far, leave a comment with your favorite Rugrat and why it’s Chuckie.
