DEV Community

SEENUVASAN P
SEENUVASAN P

Posted on

Day 14: My Small React Project Facebook like Post Component

Today, I worked on a small but fun project using React. The goal was to build a basic post component—something similar to what you’d find on Facebook—with three simple features:

Like button

Dislike button

Comment input and list display
Enter fullscreen mode Exit fullscreen mode

Why I Built It

I’m currently learning React and wanted to practice using useState for managing component state. This project helped me get comfortable with how state works and how to update it dynamically based on user actions.

How It Works

code:

import { useState } from "react";

function Facebook() {
  const [like, setLike] = useState(0);
  const [dislike, setDislike] = useState(0);
  const [comment, setComment] = useState("");
  const [commentlist, setCommentlist] = useState([]);

  return (
    <>
      <h1>like = {like}</h1>
      <h1>dislike = {dislike}</h1>
      <ul>
        {commentlist.map((c, index) => (
          <li key={index}>{c}</li>
        ))}
      </ul>
      <button onClick={() => setLike(like + 1)}>Add Like</button>
      <button onClick={() => setDislike(dislike + 1)}>Add Dislike</button>
      <textarea onChange={(e) => setComment(e.target.value)} />
      <button onClick={() => setCommentlist([...commentlist, comment])}>
        Add Comment
      </button>
    </>
  );
}
export default Facebook;
Enter fullscreen mode Exit fullscreen mode

What I Learned 

How to use useState for multiple state variables

Updating arrays in React using the spread operator ([...])

Handling input changes and user interactions
Enter fullscreen mode Exit fullscreen mode

Top comments (0)