Props Goes the Weasel
I’m a little bit over a week into my experience with React, and I’m beginning to see the very cool and powerful things of which it is capable. There was a bit of a learning curve at first, but now that the material is sinking in, I’m enjoying working with it! So, I wanted to take a high level glance into the world of react.
As stated in the React Docs, React is a declarative, component based JavaScript library used to create interactive UIs. Whew, that’s a lot of technical jargon! Boiled down, that means it’s clear, easy to read, easy to predict, and allows us to pass data through our application. While we could dig into a lot of this, I want to talk about the “passing of data” through our application.
Side Note: for further information about components and what else React can do, go to the Docs! They’re great, well organized, and easy to navigate.
In React, we can keep track of data — specifically, things that are important to making our app work. And, this data can be passed down in one of two ways: 1.) Props or 2.) State. If they both keep track of and pass down data, why have two? What’s the difference? The best way I’ve heard this explained is this: Props are inherited; things that we can’t change (think eye color, hair color, etc.). On the other hand, State is something we can manage and control(ie. mood, hair length, etc.) The purpose for choosing one over the other is strictly dependent on how we’d use data in our application. Let’s take a look!
My application is an SPA that shows many cards, each card representing an individual toy character, showing name, likes and a delete button. In my application tree, I have an App Component that renders a CreateForm and a ToyContainer. My ToyContainer then renders ToyCards. You can picture the application tree looking something like this:
For the purpose of my application, I’ve chosen to have my data live in the App, since it can manage and pass data to its children below. In my App, I’m fetching all the toy data from my database. Since I know I’ll want to change my toy data(create toys, edit number of likes, and delete toys), I’m choosing to have that data stored as State.
The wild and crazy part — I can then pass that State down to my other children components as Props!
**Important to note: while state can be passed down, the only component a state should be changed is in the component in which it lives. **
Props, short for properties, is as it sounds — a property from one component that we’d like to pass down to another component. Props can be functions, objects, or even State! In my application, I’m passing down the State of toys into my ToyContainer, which will then pass that Prop down as a Prop to its child, ToyCard, so each toy can be rendered accordingly to the page.
This one small move shows how truly powerful React can be in storing and handling data to create our UIs.
Data handling can get tricky. Figuring out where out Single Source of Truth can get, well…, tricky. But if we follow a general practice — if it needs to be changed, keep it in State and if it it just needs to be passed down, keep it in Props — we’re well on our way to becoming great React devs. And as always, consult the React Docs.
Thanks for stopping by, and happy coding!
