Blog

In this blog, we will build a simple comment system in React where users can add, view, and delete comments. This system will not persist data on a server but will store data locally within the app for demonstration purposes.

Steps to Implement a Comment System in React

1. Set Up React App:
   First, create a new React application using Create React App.

npx create-react-app react-comment-system
cd react-comment-system
npm start

1. Create Comment Component:
   We’ll create a CommentApp component to manage adding, displaying, and deleting comments.
2. Build the Comment Form:
   We’ll add an input field and a submit button to allow users to add comments.
3. Display Comments:
   We’ll display the list of comments entered by the user below the form.
4. Delete Comments:
   We’ll allow users to delete comments from the list.

Code Implementation

1. App.js:
   This is the main component where we will implement the comment system.

import React, { useState } from "react";

function App() {
  const [comments, setComments] = useState([]);  // State to store comments
  const [commentText, setCommentText] = useState("");  // State for new comment

  // Handle the change in the comment input field
  const handleCommentChange = (e) => {
    setCommentText(e.target.value);
  };

  // Handle the form submission
  const handleCommentSubmit = (e) => {
    e.preventDefault();

    // Add the new comment to the list
    if (commentText.trim() !== "") {
      setComments([...comments, { id: Date.now(), text: commentText }]);
      setCommentText("");  // Clear the input field after submission
    }
  };

  // Handle deleting a comment
  const handleDeleteComment = (id) => {
    setComments(comments.filter((comment) => comment.id !== id));
  };

  return (
    <div className="App">
      <h1>React Comment System</h1>

      {/* Comment Form */}
      <form onSubmit={handleCommentSubmit}>
        <input
          type="text"
          value={commentText}
          onChange={handleCommentChange}
          placeholder="Enter your comment"
        />
        <button type="submit">Add Comment</button>
      </form>

      <h2>Comments</h2>
      <ul>
        {comments.map((comment) => (
          <li key={comment.id}>
            <p>{comment.text}</p>
            <button onClick={() => handleDeleteComment(comment.id)}>
              Delete
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Explanation of Code

1. State Management:
   • comments: Holds the array of comments. Each comment is an object with a text and id.
   • commentText: Stores the text entered in the input field.
2. handleCommentChange:
   Updates the commentText state whenever the user types in the input field.
3. handleCommentSubmit:
   • Adds a new comment to the comments array when the form is submitted.
   • Uses Date.now() as the unique id for each comment to help with rendering and deleting.
4. handleDeleteComment:
   Filters out the comment with the matching id when the “Delete” button is clicked.
5. Rendering the Comments:
   • We map over the comments array to render each comment and display the “Delete” button next to it.

Styling (Optional)

For better presentation, you can add simple styles in App.css:

.App {
  text-align: center;
  padding: 20px;
}

input {
  padding: 10px;
  width: 300px;
  margin-bottom: 20px;
}

button {
  padding: 10px;
  margin-left: 10px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  background: #f4f4f4;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}

button {
  background: red;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

Testing the Comment System

1. Add a Comment:
   • Enter a comment in the input field and click “Add Comment.”
   • The comment will appear in the list below the form.
2. Delete a Comment:
   • Click the “Delete” button next to a comment, and it will be removed from the list.

Conclusion

We’ve successfully implemented a simple comment system in React where users can:

• Add new comments.
• View the list of comments.
• Delete comments from the list.

This comment system uses React’s useState hook to manage the state and updates the UI based on the changes in the state. It’s a basic implementation and can be enhanced by adding features like edit functionality, server-side persistence with a backend, or even user authentication.