React.js – edit and delete comments in CommentBox

It appears customary for high-intelligence, high-skills groups of engineers to "roll their own" whenever they have a chance to. Counter-intuitively to most managerial/MBA types out there, re-inventing the wheel can give you... a better wheel. Success is not guaranteed though – but these people may leave sooner rather than later if you don't let them...

Having looked at number of JS frameworks (ember, backbone, angular) there was no clear winner. They were all a mess, at least to me. So I approached React.js with no hopes – how much better could it possible be? It turns out, a lot!

This post will be an extension of the official React.js tutorial. The tutorial stops at the stage where you can add comments to a dynamic lists, that will grow as you add comments. This falls short of the functionality displayed on facebook: once you add a comment you can edit or delete it, so that's what're going to do. Full disclosure, I only started using React this weekendo so my guide will inevitably be 'imperfect'.

Let's start by modifying the Comment render method, to show the form editing form:

So now our Comment is willing and ready to be edited. But the CommentList in not aware of it, the handleDelete and handleUpdate methods cannot be propagated anywhere. Let's modify the CommentList to make the propagation possible: So CommentList has mystery props onCommentDelete and onCommentUpdate, let's not worry about them for now. What's important and is that we initialize the Comment component with two bindings onCommentDelete and onCommentUpdate. They link the Comment component back to the CommentList. Let's go back to the Comment and finish the work there. So the Comment handleUpdate and handleDelete will simply look back to the props methods we've bound in the CommentList. To actually do anything, we have to make the CommentBox aware of what's going on. And voila, hopefully it's a working. I'm not sure it's the right or the most efficient way of doing things but it covers things that I wish were included in the original tutorial.

Comments

  1. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. AldaimSolutions as an offshore e-Commerce website development company provides a wide range of online business solutions in web and mobile space.Popular rails gemsRails is basically a web application framework, which is consist of everything needs to create database baked web application. It helps the developers to create websites and applications by providing structures for all codes written by them. Moreover, common repetitive tasks are simplified with the help of this technology.
      Websites made with PHP and Shopify
      Best Ecommerces Company Audacity24
      Websites made with PHP and Shopify
      Best ruby APIS
      React native and React Js
      Node Js and React Js

      Delete
  2. where is the code for delete and edit?

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Very interesting blog post, Many thanks for taking the time to put this together. Great stuff

    Best Regards,
    CourseIng - ReactJS Training in Hyderabad

    ReplyDelete
  5. I accept there are numerous more pleasurable open doors ahead for people that took a gander at your site.we are providing ReactJs training in Chennai.
    For more details: ReactJs training in chennai

    ReplyDelete
  6. The tutorial about the React JS that you are mentioning in the blog is very correct and could help to any lay man to understand this language as it is the trending js in the market. I was also searching for dedicated reactjs developers and found this blog. Thanks for sharing such a great blog.

    ReplyDelete
  7. This is really impressive post, I am inspired with your post, do post more blogs like this, I am waiting for your blogs.
    aviation courses in Bangalore
    aviation institute in Bangalore
    aviation courses
    airline courses

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. Well you use a hard way for publishing, you could find much easier one!

    ReactJS Online Training

    ReplyDelete
  10. Rails is basically a web application framework, which is consist of everything needs to create database baked web application. It helps the developers to create websites and applications by providing structures for all codes written by them. Moreover, common repetitive tasks are simplified with the help of this technology.
    ruby on rails software house
    Popular rails gems and APIs
    Websites made with ruby
    Best ruby gems 2019
    React native and React Js

    ReplyDelete
  11. Me2call4u is a free high-quality voice, video, and Video calling app , This app which can be used in both Android and iOS is perfect for family and friends. Go live, with random video chat, and connect with anyone from the anywhere in the world with a single swipe!

    ReplyDelete
  12. I enjoy what you guys are usually up too sort of clever work and coverage! Keep up the wonderful works guys.
    python training in chennai |python course in chennai

    ReplyDelete
  13. Very interesting blog post, Many thanks for taking the time to put this together. Great stuff
    react js online training

    Best Regards,

    ReplyDelete
  14. AldaimSolutions as an offshore e-Commerce website development company provides a wide range of online business solutions in web and mobile space.Popular rails gemsRails is basically a web application framework, which is consist of everything needs to create database baked web application. It helps the developers to create websites and applications by providing structures for all codes written by them. Moreover, common repetitive tasks are simplified with the help of this technology.
    Websites made with PHP and Shopify
    Best Ecommerces Company Audacity24
    Websites made with PHP and Shopify
    Best ruby APIS
    React native and React Js
    Node Js and React Js

    ReplyDelete
  15. Thanks for sharing this information!
    I totally agree with you. Your information is very interesting and important. I really like this information.
    Our easy isReactJS Online Training in Hyderabad
    If you want to see our training venue then click on links:
    https://www.futureqtech.com/reactjs-online-training.php
    Call Now: +91 9581111796
    Drop Mail: info@futureqtech.com

    ReplyDelete
  16. It’s great to come across a blog every once in a while that isn’t the same out of date rehashed material. Fantastic read.
    Data science Course Training in Chennai |Best Data Science Training Institute in Chennai

    ReplyDelete

Post a Comment

Popular posts from this blog

Example slurm cluster on your laptop (multiple VMs via vagrant)

ROCS-like shape overlap in rdkit