Submitted about 2 years ago

Interactive comments section using React

Daniil• 170

@Daniil034

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Interactive comments section

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

It took me muuuuuch longer than I expected since it's my first React project. The main problem with this project is that I needed to use useState of all messages in main App component and then pass it to next components, but instead I tried to update the exact message inside of it. I understood it when I asked myself: "How would I send the whole pack of messages to the server if I had to? Did all my messages array get updated?". I figured it out by just placing a mock button at the end of the page with console logging the last message of my messages array from main App component. The result showed me that the main array of messages didn't get updated and because of that the function getId() in App component failed to assign a unique ID for new replies. Unfortunately I realized it too late and I got tired of the project so I leave it for a better days. P.S. Probably Redux could help me avoid this mistake. I'll check it in next projects!

Community feedback

David• 8,000

@DavidMorgade

Posted about 2 years ago

Hey Daniil, I encourage you to come back in the future on this project and keep going, you did a fantastic job, don't give up!

Instead of redux, you could also learn how to use the Context API wich is more easy to use than redux with the useContext hook, just give it a time with react, learn more about how it works and all the things you can do, learn context, and all the hooks also redux and come back to this project to smack it up!

Marked as helpful

Daniil• 170

@Daniil034

Posted about 2 years ago

@DavidMorgade Hey, David! Thank you for the hint and encouraging)

mako542b• 370

@mako542b

Posted about 2 years ago

On small screen - under 400 px it seems too squeezed and some icons overlaping. Message container have a bit different structure for phone design. I like the logic of the likes - in my you can click it infinitely xd. I thought of adding an array to comment object with logins which liked or disliked comment, where one login can't appear twice, does it work similar here?

Daniil• 170

@Daniil034

Posted about 2 years ago

@mako542b Hello! Thanks for your comment! I made a separated component ScoreCounter in my project, you can check the logic if you like. What I did is used hook useState and created restrictScoring variable with initial state of 0. For each button I created separate handlers with the next logic - when you click on button it checks the restrictScoring value. For plus button if restrictScoring === 0, then set user score + 1 and setRestrictScoring(1) (so you can't plus more then once), if it's === -1, then set user score + 1 and setRestrictScoring(0). For minus button if restrictScoring === 0, then set user score - 1 and setRestrictScoring(-1), if it's === 1, then set user score - 1 and setRestrictScoring(0). Just set a limit between -1 and 1 and play around it) ...But while I was writing this comment I understood that it wouldn't work if you sent userscore value to the server and then realoaded the page... so probably you are right about the array of people who liked. And then everytime check if a user is in an array and let him or restrict from liking a comment

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord