I am learning reactjs, and was making note taking app. Its working fine so far, but it isnt working when i close a note and then try to open same note again. If i open any other note than the one i closed it works fine.
I know that my if condition is causing this because i have below condition in my code nextProps.note.id !== this.state.note.id which only returns true if ids are different.
I tried many many variations but i am not able to implement note details and close feature all together. I know i am so close and just making some silly mistake, but i am not able to catch that mistake may be my reactjs understanding is weak.
If someone can point me in right direction or just give a clue that will be a great help, as i have spent many hours on this with no luck so far.
Demo : https://codesandbox.io/s/wqqklork
How to recreate bug : Click on note 1, then click close note button and then again click note 1 (this will not work), But if you click note 2 it will work.
I believe its an issue with component lifecycle,when you click a new note a whole new component is rendered but when you click on the same component twice,the second time a new component is not rendered but the same same one is updated. Check on the willcomponentupdate lifecycle method .Hope that helps.
Related
I've been trying to implement a drag and drop library called dnd-kit for React.
I been working on a very basic example with help of the guide for sorting list with overlay but it doesn't work and i can't tell what am i doing wrong.
Here is the Sandbox Code
The animation is not properly working and if I interact with the first row, it freezes and stop working at all.
Any help please?
Edit:
After playing with it for some time and some input from the author I got it working a bit better and found the the component DragOverlay is causing the problem which I can't solve just yet.
If DragOverlay is deleted or moved outside the DndContext, it sorts just fine but without the overlay effect.
The issue is casued by the id 0. Basically the id that you pass to the useSortable hook has to a be a string (or truthy)
I changed the ids from number to string and it started working. I also forked and updated your Sandbox Code
Anyone know what is the problem? Each post is a component on its own. When I click the comment button of the second post, the comment box on the first post appear instead.
You code showing that you have written code for like and unlike a post in you Post component. The code is common for all posts. Try to create a separate component for like section.
See this SO for a similar example: React toggle like button
For those who might come across this thread later, I haven't found any valid solution by now. Thus, how I solve this is kinda a bit hacky and might cost a lot of time if your app is quite complex. I added id(not HTML id) to each post and loop through each post and check the id with the id of the element that emits the action to show comment box. If they match simply set the display of the comment box to block.
I use react.js + es6 + webpack to develop my application.
recently, I find if I click a button multiple times in short time, the click handler will trigger multiple times.
I think it's a common case, code snippet like this:
#debounce()
onMidCardClick(url) {
console.count('onMidCardClick trigger times : ');
window.location.href = url;
}
before navigate to the url address, onMidCardClick event handler will triggers multiple times.
So, my way is create a debounce.decorator.js to handle this situation.
I think my way's advantage is easy to read and keep maintainability.
My question is:
1. Is it necessary to handle this? I mean, maybe react synthetic event will handle this for me?
2. My application has many events, I add debounce decorator for many of them. I test it, it works fine, but I am not sure I am correct. Because I saw many applications not deal with this.
No, all you need to do is, the moment user clicks a button, disable the button till you get the response. You can also disable other buttons too if required. Ex.
<button type="button" disabled={!this.clicked}>Button</button>
From a usability point of view, if the user clicks on a button/li/div element and you are executing some logic, it is better to give a visual indicator that some processing is happening, with a loader or a progress bar.
You can write a react component for a full page loader like this and show it to the user, which effectively prevents the user from clicking the element again while giving a visual clue as well.
I ran into another snag while going through the ThinksterIO Learn to Build Real Time Webapps tutorial around the 90% mark where one is shown how to add and delete comments:
https://thinkster.io/angulartutorial/learn-to-build-realtime-webapps/#adding-comments-functionality-to-the-post-service-9
Every time I click the Post Comment button absolutely nothing happen and I simply can't figure it out. I am expecting some kind of error to show up but nil. It's as if the button is not hooked up to the function. I was so frustrated that I eventually just copy and pasted the code from the tutorial to make sure I had it down right. Even after doing that it still didn't work.
I've created a Plunker with this app running over here http://embed.plnkr.co/OhzDTU/preview
You can sign in with the email user#user.com and 1234 password. You will then be able to try to comment on posts. Any ideas on what is going wrong here?
UPDATE
I took away the user user#user.com and 1234 password since problem is now fixed.
Your add comment button is in showpost.html, which is rendered by PostViewCtrl. However, your addComment method is attached to the scope of PostsCtrl (it doesn't exist when you try to click it). The simplest answer here is just to move addComment() over to the other controller.
Regarding the lack of error messages, I don't think that you can get an error for this. I had a look at the docs for $log and tried to decide if you could add some debugging output, but it looks like it's already on (i.e. the lack of a method seems to fail silently).
About your only option here is to try something like {{addComment|json}} in the view to see if it exists, but you'd first have to suspect that it didn't.
I did not like the answer to this question. To my mind, it has a bad code smell.
I am new to Angular, so I thought I could learn something if I created a Plunk to help that questioner.
My Plunk is http://plnkr.co/edit/fJcew7cGCPzJ0nhIQXjg?p=preview, but there two things which I don't understand.
Please note that I assigned the ng-grid's data two ways - at one fell stroke and row by row. Comment one out & uncomment the other to play around with it.
And be sure to press F12 to see the developer's console log messages.
1) why am I getting TWO ngGridEventData events?
2) why, when I push() row by row am I not getting one ngGridEventData event per push() ?
I am trying to implement master/detail/even more detailed with 3 grids (nothing to do with the current question) and have been googling for a few days now. Many people seem believe that they will get multiple ngGridEventData events and want to know ho to detect that the grid is fully rendered (hence the check in my Plunk).
In short, can anyone explain in detail how ngGridEventData works? Thanks; your answer will help a lot of people.
In a recent Answer here I showed some learnings about this strange behavior. It seems that this routine is called 2 times for reasons I can't really understand (caching maybe?).
You can get this to work if you only react when the data-object is a clone:
if (data.selected === true) {
if (data.isClone) {
numSelectionChanges = numSelectionChanges + 1;
console.log("afterSelectionChange", 'Selection has chanegd ' + numSelectionChanges + ' times');
console.table(data);
}
}
Give it a try, and if you find out why this happens please let me know.
More findings update:
Have a look at this Plunker
I have included the ng-grid.js script directly in the plunker.
If you look at rows 3344-3349 you will find this piece of code:
$scope.$on('$destroy', $scope.$parent.$watch(options.data, dataWatcher));
$scope.$on('$destroy', $scope.$parent.$watch(options.data + '.length', function() {
dataWatcher($scope.$eval(options.data));
$scope.adjustScrollTop(grid.$viewport.scrollTop(), true);
}));
As you can see the there are two watchers applied which looks like a leftover from changes to me. (Although i'm not sure, with me being dumb and those guys being clever). However, if I comment the first line out everything seems to work as expected.
Be carefull when you try this out, because it may break other functionality. I'm not very comfortable with hacking in such a lengthy source code. If someone who is an actual ng-grid team member sees this he can tell me if I found a bug and how to report it. (Never done that before!)