Interactive comments section with React

Community feedback

• 

  Jon Wright•160

  @Dr-Wrong-MoPosted over 2 years ago

  Your CSS work here is fantastic.

  I like that you managed the voting history, and I can't upvote or downvote a comment more than once.

  What issues did you run into with editing and managing data?

  I used JavaScript object classes for my comment object. I thought that was very useful in maintaining continuity.

  Marked as helpful

  0

  ---

  

  jonathan•50

  @JonathanmeijPosted over 2 years ago

  @Dr-Wrong-Mo Thanks!

  I ran into the issue that I passed the state variable down a lot of times. It didn't create any issues, but it didn't feel right to pass it down so many times to thru all the components.

  I saw that you made your's in Angular, I don't know if it works the same as react with state variables. How did you use JavaScript object classes to fix that?

  0

  

  Jon Wright•160

  @Dr-Wrong-MoPosted over 2 years ago

  @Jonathanmeij, I actually didn't make mine in Angular. I made it with plain JS and bundled it with Webpack.

  To answer your question about classes. I took a similar approach to what I would with Angular.

  I created a file for my comment object class. Seen here: https://github.com/Dr-Wrong-Mo/fem-interactive-comments-section/blob/master/src/scripts/class__comment.js

  You may notice that I create all comments with an empty replies array. More on that in a moment.

  Anytime I needed to create or modify a comment, I would use that class.

  Here is an example of me using it to create a new top level comment (see line 41): https://github.com/Dr-Wrong-Mo/fem-interactive-comments-section/blob/master/src/scripts/eventListener__createNewTopComment.js.

  I simply called on the class to create a new instance of a comment object, and passed in the relevant data. Now, about that empty replies array. If it is a new top level comment, no action is needed. If I were editing an existing top level comment that had replies, I would create a new instance, pass through all the information, such as the score, the ID, updated comment value and the existing array of replies.

  If I was adding or editing a reply, I would create the new class, which would include a replies array, then I would immediately delete the empty replies array from that object.

  I haven't worked with React as much, but I don't see why it would be an issue to pass your state variable into as many components as you need. I called on local storage in nearly every module I created. I don't know how you would do it otherwise.

  0