A Simple bug turns out to be a Night Mare

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.

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 :)