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.
Related
I want to implement an idea using react-tabs where I change the content displayed in the TabPanels depending on a particular state.
I have tried to implement this by having a parent component (AppTabs) that depending on the value of the state (let's call it mode) it renders one of two different components: Tables or Graphs.
These two components return the TabPanels with the content that each of them should render.
Here is the code:
AppTabs:
AppTabs code
Tables:
Tables code
Graphs:
Graphs code
When I try to execute this, I get the following error message:
Warning: Failed prop type: There should be an equal number of 'Tab'
and 'TabPanel' in Tabs. Received 2 'Tab' and 0 'TabPanel'.
Does this mean that I need to declare all of the pieces of react-tabs (Tab, Tabs, TabList, TabPanel) in the same component or else it won't work? Or am I doing something wrong?
I want to do it this way because then I could have all of the states regarding the Tables component or the Graphs component separated. Otherwise, I would need to set all of the states for both of these components in AppTabs and I think that would be very cluttered and a nightmare to maintain.
Thank you for your feedback in advance! Have a great day!
I have an answer for this issue.
I asked the react-tabs team about this issue as well and this was their answer:
Hi. Unfortunately there is no way to declare your TabPanels in a separate component; the Tabs component can't detect them through the component boundary.
The team provided some suggestions on how to deal with this situation. They are explained in the discussion we had over at their github page.
Here is a link to the issue if anyone is interested in it: https://github.com/reactjs/react-tabs/issues/481
I hope this can be useful to someone else,
have a great day!
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.
My question is similar to this one: How to manage component rendering when there are several small, repeatable sub-components
I am building a RequirementsList component, which has a list of 'Requirement' components.
Each Requirement may have 0 or more Comment components.
When the requirements data is fetched from server, associated comments are not fetched immediately (lazy loading).
So, first rendering will show only basic part of the requirement. When user clicks on the comments tab, the comments component in comments tab makes a call to the store to fetch the comments.
Now when comments are successfully fetched from server, I want to re-render the affected comments tab.
I am in a dilemma on how to propagate the received comments data to the comments component. I can see a couple of options:
Comments Component listens for store event, gets the data and updates itself. This is straight and simple. But violates the principle of data flow from parent.
Parent root component (RequirementsList) listens to store, and propagates the results as props. In this case, I donno how? The parent is only listening for list of requirements, and not for comments against each requirements.
So, I presume that first option is the right way to go, as the parent doesn't care in managing the data for some Comment component deep down the hierarchy.
Are there any better suggestions for this?
I would probably go with option two. You stated that the comments are related to the selected requirement. I would also be inclined to load the comments when the requirement is selected rather than the comment tab. This should provide a better user experience.
im looking to implement a directive to display status messages in my ionic angular app.. the idea is that i define a bunch of standard status messages in my template as follows and it's inspired by the stock ng-switch directive..
<status-bar code="statusCode" onShow="onStatusShow" onHide="onStatusHide">
<status-message when-code="OK" style="calm" timeout="3000">My HTML message</status-message>
...
...
<status-message when-complex style-field="style" text-field="text" timeout-field="timeout" />
</status-bar>
my requirements are these:
status-bar
the directive should bind to $scope.statusCode and depending upon its string value, it should activate one of the sub-directives except the when-complex one..
however, if i assign an object to $scope.statusCode, it should activate the when-complex directive if defined..
the directive also exposes an onShow and onHide callbacks..
when changing the value of $scope.statusCode, the previously active sub-directive should be completely hidden before showing the newly active one.. (animations)
status-message
style and timeout attributes are optional and will default to 'stable' and null respectively..
the timeout attribute will cause this sub-directive to show for a short time before clearing $scope.statusCode..
whereas i can write very simple directives, this one is proving to be a bit beyond me.. ive seen the source of ng-switch and its confusing.. i have tried myself as well but i havent gotten really far with this no matter how much ive tried.. im not posting my code approaches here not for the lack of trying but for the sake of cluttering and relevance..
so i was wondering if maybe someone could come up with a possible basic approach on codepen or plunkr that i can use as a base for expanding upon (since this is just a simplified explanation of what i intend to do with this directive).. or atleast point in the directions i need to go in..
after a night of brain-storming and coding punctuated by coffee and smoke breaks.. ive managed to make it work.. once again keeping ng-switch as a base.. the code is a bit long.. and i changed a few requirements along the way for better usability.. and some requirements like #2 and #3 dont work yet.. but im pretty sure ill make it work as well..
so if anybody is having a similar issue or is interested in my solution.. i can post it here.. :)
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.