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
    Replies
    1. This comment has been removed by the author.

      Delete
  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. 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
  6. This comment has been removed by the author.

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

    ReactJS Online Training

    ReplyDelete
  8. 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
  9. 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
  10. Very interesting blog post, Many thanks for taking the time to put this together. Great stuff
    react js online training

    Best Regards,

    ReplyDelete
  11. 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
  12. Nice blog.
    The details that you mentioned in the blog regarding Reactjs is very easy to understand and is also very useful. Anyone who is looking to learn about react JavaScript can read and understand about this tech language for its use in development. I was also looking for dedicated reactjs developer and found your blog.
    Thanks for sharing such a great blog.
    ReactJS Development Company India
    Web Development Company in India

    ReplyDelete

  13. Wow it is really wonderful and awesome thus it is very much useful for me to understand many concepts and helped me a lot. it is really explainable very well and i got more information from your blog.
    Software Testing Training in Chennai | Software Testing Training in Anna Nagar | Software Testing Training in OMR | Software Testing Training in Porur | Software Testing Training in Tambaram | Software Testing Training in Velachery

    ReplyDelete
  14. This is a topic that is near to my heart... Cheers! Where are your contact details though

    ReactJS Training in Bangalore

    ReactJS Online Training

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

    ReplyDelete

Post a Comment

Popular posts from this blog

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

Wrapping openbabel in python - using cython