This project implements a dynamic comment section using React. It allows users to add, edit, delete, and reply to comments, with persistent storage using localStorage.
- Add new comments
- Edit existing comments
- Delete comments with confirmation
- Reply to comments (nested comments)
- Sort comments by newest, oldest, or most replies
- Persistent storage using localStorage
- Responsive design using Tailwind CSS
-
Clone the repository: git clone https://github.com/your-username/react-comment-section.git
-
Navigate to the project directory: cd react-comment-section
-
Install the dependencies: npm install
-
Start the development server: npm start
- To add a new comment, fill in the name and comment fields at the top of the page and click "Add Comment".
- To edit a comment, click the "Edit" button next to the comment, make your changes, and click "Update Comment".
- To delete a comment, click the "Delete" button and confirm your action in the popup.
- To reply to a comment, click the "Reply" button, fill in your name and reply, then click "Submit Reply".
- Use the sort dropdown to change the order of comments.
- React
- Tailwind CSS
The main component is CommentSection
, which handles all the logic for managing comments. It uses several React hooks:
useState
for managing component stateuseEffect
for handling side effects like loading and saving comments to localStorage
Contributions are welcome! Please feel free to submit a Pull Request.
This project is open source and available under the MIT License.