Day-35 My First React Hooks Project: Like, Dislike & Comment System

Today, I learned about three important concepts in React: useState, the spread operator (...), and the onChange event. To practice them, I created a small project that includes a Like, Dislike, and Comment feature. Here's how it works and what I learned.

What I Built

I created a simple React component where users can:

• 👍 Like
• 👎 Dislike
• 💬 Add comments

Each interaction updates the UI in real time using React Hooks!

What I Learned

1. useState – React's Way to Handle State

React's useState is a Hook that allows us to create state variables in functional components.

let [like, setLike] = useState(0); let [dislike, setDislike] = useState(0); let [comment, setComment] = useState(""); let [commentlist, setCommentList] = useState([]); 

• like and dislike store numbers.
• comment stores a single input value.
• commentlist is an array that stores all submitted comments.

2. onChange – Tracking User Input

The onChange event helps us track changes in form inputs. In my project, I used it to update the comment as the user types:

<textarea onChange={(event) => setComment(event.target.value)} /> 

Now the comment state always holds the latest text from the user.

3. Spread Operator (...) – Copy and Add to Arrays

To add a new comment without replacing the old ones, I used the spread operator. It lets us create a new array by copying all previous values and adding the new one:

setCommentList([...commentlist, comment]); 

This line means:

"Create a new array with everything from commentlist, and then add comment at the end."

Full Code

import { useState } from "react"; function Hooks() { let [like, setLike] = useState(0); let [dislike, setDislike] = useState(0); let [comment, setComment] = useState(""); let [commentlist, setCommentList] = useState([]); return ( <div className="container"> <h1>Like: {like}</h1> <h1>Dislike: {dislike}</h1> <ul> {commentlist.map((c, index) => ( <li key={index}>{c}</li> ))} </ul> <button onClick={() => setLike(like + 1)}>Like</button> <button onClick={() => setDislike(dislike + 1)}>Dislike</button> <br /> <textarea placeholder="Comments Please..." onChange={(event) => setComment(event.target.value)} ></textarea> <button onClick={() => setCommentList([...commentlist, comment])}> Add Comment </button> </div> ); } export default Hooks; 

✅ Final Thoughts

This project helped me understand how React handles state and user interactions. Here's what I used:

• ✅ useState for dynamic updates
• ✅ onChange to track input
• ✅ ...spread to update arrays

This is a great starting point for more interactive apps. Next, I want to add features like deleting comments, editing them, or even saving them using localStorage!