A Simple bug turns out to be a Night Mare

in #india2 years ago

How a simple bug in one of the open-source project which I was working on turns out to be a nightmare though not literally. It all started with me talking to the project owner to allow me to work on it.

The change was small, that is I have to check if the props are passing the read-only value or not and based on that I will show the toolbar. Sounds a simple right, I thought the same, thus written the code as

!props.readOnly && <MyComponent ..... />

What the above code will do it will check if the readOnly is true, it will not show the component if its false it will show the component. So far so good, I was able to fix it. Now the project owner wanted me to add a button on the parent component, which will toggle this behavior. That means based on button click I will show the toolbar or not.

Easy-peasy, that's what I thought. So I have created a button and written a toggle function. And It was working for the first time, that is hiding the toolbar but the toolbar was not showing when I was clicking the button again. That's when the problem started, I was just scratching my head that what possibly can go wrong in a simple button.

image.png

PC : https://me.me

After like 2 hours of overthinking, I fixed the bug. What was happening is that to rerender the child component, there should be some kind of event which has to be passed to child component and readOnly props was not doing it. So what I have done is to create a key, and in every button click I was sending a new key to the component.

Voila !!! my code worked again. It's always nice to learn something new and I can proudly say that I have learned that today :)

Sort:  

Hi @codingdefined!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your UA account score is currently 4.533 which ranks you at #2073 across all Steem accounts.
Your rank has not changed in the last three days.

In our last Algorithmic Curation Round, consisting of 97 contributions, your post is ranked at #95.

Evaluation of your UA score:
  • Some people are already following you, keep going!
  • Try to show your post to more followers, for example via networking on our discord!
  • Try to work on user engagement: the more people that interact with you via the comments, the higher your UA score!

Feel free to join our @steem-ua Discord server

Thank you so much for participating in the Partiko Delegation Plan Round 1! We really appreciate your support! As part of the delegation benefits, we just gave you a 3.00% upvote! Together, let’s change the world!