Gotta Take A Break

First and foremost, I love React. The ‘water-fall’ flow of things is just straight-up lovely. It makes understanding code so much easier. Props flow in one direction and one directly-only.

I’m currently in the middle of building my first blog site following the project guide from the following book: “React Explained” by Zac Gordon ( amazing book, by the way). I picked this book up after completing the React Section within FreeCodeCamp, so picking up the concepts from Zac book was a lot easier. I recommend you check out FreeCodeCamp.org to get your practice-on.

Anywayz, I ran into an issue with the “NewPost” feature within my code. The idea behind this feature is that it’s supposed to send an empty object with ‘falsey’ values to my PostForm component when the New Post link is clicked.

This made ZERO sense to me because I knew that I properly configured the prop to be sent down from the parent (App.js) to the child component (PostForm.js), at least a thought I did…
I must have ran through the code over a dozen times ( 3 hours to be exact ) and couldn’t figure it out. This is what I had within the parent component before the bug fix:

{/* CREATE A NEW POST */}
  <Route exact 
       path='/newPost' 
       render={ () => <PostForm newPostHandler={this.addNewPost}/> }
       post={{id: 0, slug:'', title:'', content: ''}} />
/*Per the above, the post prop should be inside the Route cl*/

At first glance: “things looked great”, *I thought to myself*. Then I moved forward to check the state within the child component:

class PostForm extends Component{           
        state = {
            post: {
                id: this.props.post.id,
                title: this.props.post.title,
                content: this.props.post.content,
                saved: false
            }

“Ok”, * I thought to myself *, “I transferring the prop down to the child correctly, and I’m properly referencing the props within the child, so what is the issue? How could this.props.post be undefined if I’m defining it!!??

So I took a step back, went to the kitchen to get some grub and returned to my desk 40min later with a full belly. I started to analyze my code while simultaneously having a discussion with my wife about what we were having for dinner that night. Within 2 minutes of re-scanning the Parent component, I noticed a typo within the Route that rendered the PostForm component.

{/* CREATE A NEW POST */}
  <Route exact 
       path='/newPost' 
       render={ () => <PostForm newPostHandler={this.addNewPost}/> }
       post={{id: 0, slug:'', title:'', content: ''}} />
			/*Per the above, the post prop 
		should be inside the PostForm component*/

If you look closely ( that’s if you haven’t picked up on it at the beginning of this post), is that the post property that I’m attempting to pass down to the PostForm component was configured outside of PostForm closing tags.

A small change to the following cleared the issue:

{/* CREATE A NEW POST */}
   <Route exact 
      path='/newPost' 
      render={ () => <PostForm newPostHandler={this.addNewPost}
      post={{id: 0, slug:'', title:'', content: ''}} /> }
     />

What I learned:

Take breaks and go do something other than code; come back with a different set of eyes…your eyes.