This.props.state….oh my!
I made it to Mod 4! Yes I’m shocked too! When I was introduced to Vanilla Javascript, I was really starting to think maybe this is not for me. Maybe I’m not meant to be a developer & I know the saying nothing that’s easy is worth it but imposter syndrome was definitely creeping in. I eventually figured out Vanilla JS which I was happy about but I definitely could’ve spent more time with it before I was suddenly whisked away into the world of React.
So let’s first start with this, the keyword refers to a JavaScript element depending on the scope or context of its use. The keyword this is only used in React class components. In React, methods refer to class attributes such as props and state. However, for our methods to have access to state and props we need to bind the niffy little keyword this to those methods.
When I think of the keyword this , I had to give myself an analogy => “ I’m painting this wall right now. *moves to another wall* Now I’m painting this wall. Did I change my paintbrush or color or the way I’m painting? No, because I want to do it the same way. But I'm too lazy to give each wall a name.” Developers are lazy right? Perfect career choice Dolly !
The next React basic was probably the most confusing thing for me, props. I really couldn’t grasp what it was doing, but very similarly to this , it’s allowing us to access and utilize information. In React there’s always an App.js file which is at the top of the information tree. In React, information is passed down from what is called a ‘Parent’. In React other files can be the ‘Parent’ not only the App.js component because in addition to the ‘Parent’ component, we also have child components. In React the ‘Parent’ sends information down and the ‘child’ which you can have many of, in some cases sends information back up. As my favorite person, my amazing mentor James Wright has said to me many times DATA DOWN, ACTIONS UP.
I will walk through the steps of how props are being passed throughout the app. The first block of code is in my AccountContainer component, this component is the ‘Parent’ and TransactionsList is the child of AccountContainer . Transactionslist is also the sibling to the Transactions component but if they need to communicate with each other they do so through the AccountContainer. I know that was hella confusing but I will post a separate blog discussing hierarchy. Carrying on…I’ve done a ‘GET’ request from the API to get all of the transactions in the database. I then set the state of my transactionsArray to hold all of my transactions, I will discuss state after explaining how much fun props are…hahaha not really.
Moving on….line 48 is where props , which is short for properties is created and ready to be passed along to the TransactionsList, where all the transactions will be rendered. Here’s the magic of props , I did my ‘GET’ request in a completely different file but with the props that was created in my AccountContainer, my TransactionsList now has access to the transactionsArray and can use the information that it is currently holding. Now that my TransactionsList has access to the transactionsArray, I can use it to help pass on that same information in however it is needed.
Since I added the props of the array to my filter helper method, I create another props and send that information to my Transaction component to use as needed. I’ve called this soloTrans because it’s job is only to show information for an individual transaction.
I know you’re wondering….where’s this ? This Transaction component is a functional component, this is only called on class components where often times information is being passed. In this component I’ve also passed in my soloTrans props destructively, wrapping my prop in {} is what makes it destructive, and because of that I don’t need to call props.soloTrans . The Transaction component in this situation is what is considered a ‘dumb component’….very original, I know but I didn’t come up with it! But it isn’t doing anything except receiving information, not sending anything back up.
state !I don’t know about you, but I loooovvveeee arrays, from the moment I discovered what they were and how they can be used, I thought omg this is great. In vanilla JS, when I did my ‘GET’ request, I would put that data into an array to allow myself access to it but things got very tricky once the data within the array needed to change.
I was already thinking like a lazy developer and React was like don’t worry baby, I got you! Let’s discuss state ! In React state is where you store property values that belong to a component, when the state object changes, the component re-renders. Below is my code to add a transaction, I’ve initialized the state in the component to keep track of my ever changing object. The initialized state object can contain as many properties as you like, it can even be set to an empty array or string! Next I refer to the state object by using the this.state in the form inputs. Then to change a value in the state I use the this.setState() method. When a value in the state object changes, the component will re-render, meaning that the output will change according to the new value.
If you’ve noticed the onChange and submitHandler method, the onChange is capturing the change in the inputs. The submitHandler is sending information back up to its ‘Parent’ with the new information that the user has entered. Within my submitHandler addTrans is a prop ! It will then send that captured information up to the ‘Parent’ AccountContainer to post the new transaction into our database! Now our transactionsArray’s state has changed, and because of that, transactionsArray will be updated everywhere it’s being called and rendered!
Needless to say…I love React, I thought I loved Ruby on Rails but React has a very special place in my technical heart. I didn’t get a solid understanding of these things until 10 pm the night before my code challenge. I love React because it was the one language in this whole process in which I knew exactly what I needed to do because I fully understood what was happening and what needed to change once I moved onto the next set of deliverables in my code challenge. React is a super fun language and I plan to fully master it to share my sassy but hopefully very clear way of sharing my knowledge. This whole process was quite the struggle but I made it. Until next time frensss.
