React(ive) Posts 4-'Leet' Newbs Tutorial Part 4

Four is the number of death; just ask the Japanese!!! shi = number 4 and um, shi = death in japanese... this is like the word "class" or "function". Alright alright, I know when I've overdone something... maybe. You'll remember that I was super ambitious in my last post and wanted to talk about sibling communication and grandchildren.

Well, so our godfather, postsManager passed a function down to his son, searchBar2, as a prop. SearchBar2 called that function and passed it a parameter: our search text. This text is taken by the godfather's state, and passed as a property to another child, Posts.

Posts accepts three properties from our state, first is our posts, that we got from our first sibling, GetObjectFromUrl, the second is our filterText, which we got from our second sibling, SearchBar, and the third is a method, selectPost, which looks like it setsState of selectedPost and openEditor. HINT: these are probably going to be used in PostsItemEditor. So, as we can see, sibling communication happens through the parent. Now, lets look at this sibling and Posts's children, which are grandchildren to our godfather.

Now, you might notice how many lines this component is... yeup, that's a sign of code stink per React. Maybe this one IS stinky, but I'm an elite newb, ya know? What is this, my 6th or 7th component ever? Like, duh... If I were writing to you elite masters of the universe, then maybe, just maybe it might be better, but I'm not... I'm writing to we who still crawl on the ground. Here, let me critique me... um... .map, dude, for one. Um... ever consider better logic instead of this many loops, dude? Really, a for in a for, what are we three? Wait, isn't that after another for?!?!?!?! Cranky bugger, ain't I?

Ok, so posts is meant to do one thing: grab all of our posts, categorize them, put them in panels under tabs, and then display those panels when the tab is pushed... 'Doh I really meant to say just one thing.

So... *drums fingers on table*, let's look past some of these obvious odious errors. We get our properties, and in those properties, I can get a function, selectPost (line 23 from top), then I can call that function inside a new defined child function named: selectPost... (line 12 from next block) and then assign that function to a child's props... Wait, I bet, we could just assign the function straight to the child, like this in line 56:

Well, I'll be a monkey's uncle... (again, pun intended). You can absolutely do that, and the grandchild can talk to the grandparent in this manner!!! WOW! There's four lines of codestink gone!

So, the way this works now is, my godfather has a way to set a specific post out of an array of posts. This child, Posts, conducts a way to display each group of posts (for loop line 42). It is a jagged array, panels, that accepts first, a header, and then an array of posts,subrows, that match that header category. By specifying how that jagged array should appear in each of those children as html, we can actually just write {panels} (line 30 and 72) in our return and it will write every html element in it!!!! Also specified in this ugly albeit awesome code, is a tabs bar whose elements/categories disappear as the user types in the search box. However, that is outside the scope of this article, you'll have to pull down the code to check it out. So, as categories become irrelevent, they disappear from our tabs and out of our array. You'll have to look at the logic inside those for statements, inside the render, because that is where most of this logic is.

Alright, we're now to the grandchild, PostsItem. PostsItem is just one post that will be inserted into that jagged array. it has a function that we bind in the constructor that basically passes the post back to the godfather if the post is clicked through an onClick event handler. Pretty concise.

Back in the Godfather, the Godfather receives the good news that a post has been selected to "sleep with the fishes". He sends out his hitman, PostsItemEditor.

Our hitman accepts three orders, I mean properties, (line 52 of first code block) First, do you really want me to do it, or openEditor which is a boolean, Second, what's the target, I mean, the post, and third, how does everything look after I do my job, I mean the function: updatePost. Okay, lets deal with the second and third arguments first. The second, what's the target, basically populates our editor with information, useful, right? The third, basically tells our array how to change when our data is modified. This was difficult, so I'm going to recopy that method right now:

Alright, in order to update an array that is in state, you need to setState, obviously, to let the family know what you've done. but, you use Object.assign to actually modify that element. If you do it in a map(), not bad at all. I got this solution from Stack Overflow, everyone upvote Luke... https://stackoverflow.com/questions/28121272/whats-the-best-way-to-update-an-object-in-an-array-in-reactjs

Okay, the last argument that I passed in was a boolean that told this hitman whether to accept props or not. Let me explain. Because our hitman is a child of the godfather, he is on the page. When you are on the page, you aren't recreated every time you are called, your properties are updated and you just rerender. So, in our lifecycle, we have an event called "ComponentWillReceiveProps". Basically, anytime the godfather was getting any information at all (through setState), he was sending his hitman out... that's not good. So, now, his hitman still knows everything the godfather passes him, and the godfather tells him whether it is really a hitman "fixer" issue with the boolean variable. The Godfather can now get information from all kinds of sources... every time the hitman also knows something has changed, but also now asks, "whatcha want me to do boss?" before going and trying to take care of the situation.

So, maybe you have better ideas, maybe you think you got better answers to these... dilemmas. Maybe yous think the family needs a new head, eh? Well, go ahead and leave a comment... We're all friends, here, right? If ya got somethin' to say, prove it. If I React, I'll just keep it in the family, ya know?

After all, I'm still just a 'leet newb...