Today marked the day when I got my first React error which I couldn’t solve. I will talk about it in details later in this blog. But first, let me tell you what cool stuff I learned today in React. 😎
React has something called Single Source of Truth (SSOT). It is the practice of structuring information in such a way that it is linked to only a single point. This makes applications more efficient and bug-free. 💯
Another thing I learned was how to lift states in the components. Let’s say you have an App component which has two child component. One is NavBar, and the other is Counters. The Counters component has then another child component – Counter.
Now you need to update the NavBar component according to how data changes in Counter component. You could have used props if Counter was a child of NavBar, but as you can see, it isn’t.
🤔 What can be done in this scenario? The only thing which is possible is if we lift the state of Counter component to the App component. This way, the NavBar component can access the data in the Counter components via props.
🚧 type error – this.props.ondelete is not a function
As I am learning React, I am also creating a small application. It’s called Counter App. Yes! That’s right. I gave a small example from some of its code in my last blog yesterday.
Let me show you first how it looks. And then I’ll come back and explain it’s significance in today’s work. 👨💻
Now you have seen what I am working on; you can guess that I update this application daily. Install new features in it. Experiment on it. And what not!
I added a reset button in this app today. There was no SSOT logic in my application. So first, I implemented it on all components, and then I used it to create the reset button. Took me some time but I did it.
🏗 Later, I created a NavBar component and synced all the components — Counter, Counters, Navbar — with the App component. I then lifted the states of Counters and Counter component to the App component so that the NavBar component can access the data in them.
Everything was working perfectly until I pressed the delete button. The app stopped working and gave me this error. 😐
📃 The error is self-explanatory. this.props.onDelete is not a function. But it is!! I have checked it twice. Nothing in the backend explains why React is not accepting it as a function. I implemented the increment button in the same way as the delete button, and the increment is working just fine.
After spending more than a fair share of my time trying to solve this error, I called it a day. Tomorrow I will pick this app right from where I have left it, and will again try to solve this error. But until then, cheerios. ✌