React Beginner Task: Build a Comment Box
👈 What You’ll Build
A small app where users can:
Type their name and a comment
Click Submit
See their comment added below the form
🌟 Learning Goals
Concept What You Will Practice
JSX Writing clean UI with React syntax
Props Passing data into components
Children Optional content like timestamps
Props
useState Managing form inputs and
comment list
Forms Controlled inputs with onChange
Step-by-Step Instructions
🔹 Step 1: Create a New React App / Or use vite
npx create-react-app comment-box-app
cd comment-box-app
npm start
🔹 Step 2: Create [Link]
function Comment({ name, message, children }) {
return (
<div className="card mb-3">
<div className="card-body">
<h5 className="card-title">{name}</h5>
<p className="card-text">{message}</p>
{children && <small className="text-muted">{children}</small>}
</div>
</div>
);
}
export default Comment;
🔹 Step 3: Create [Link]
import React, { useState } from 'react';
import Comment from './Comment';
function CommentBox() {
const [form, setForm] = useState({ name: '', message: '' });
const [comments, setComments] = useState([]);
const handleChange = (e) => {
const { name, value } = [Link];
setForm(prev => ({ ...prev, [name]: value }));
};
const handleSubmit = (e) => {
[Link]();
if (![Link] || ![Link]) return;
setComments(prev => [...prev, form]);
setForm({ name: '', message: '' });
};
return (
<div className="container mt-4">
<h2>Leave a Comment</h2>
<form onSubmit={handleSubmit} className="mb-4">
<input
name="name"
placeholder="Your name"
value={[Link]}
onChange={handleChange}
className="form-control mb-2"
/>
<textarea
name="message"
placeholder="Your comment"
value={[Link]}
onChange={handleChange}
className="form-control mb-2"
/>
<button type="submit" className="btn btn-
primary">Submit</button>
</form>
{[Link]((c, i) => (
<Comment key={i} name={[Link]} message={[Link]}>
🕒 Just now
</Comment>
))}
</div>
);
}
export default CommentBox;
🔹 Step 4: Use CommentBox in [Link]
import CommentBox from './CommentBox';
function App() {
return (
<div>
<CommentBox />
</div>
);
}
export default App;
🔹 Optional: Add Bootstrap
npm install bootstrap
In [Link]:
import 'bootstrap/dist/css/[Link]';
🔎 Helpful Hints
useState is used to store and update values
Use value and onChange for controlled inputs
Pass props to reuse the Comment component
Use children to insert extra content like timestamps
Bonus Challenges
1. Show a “No comments yet” message if the list is empty.
2. Add a timestamp using new Date().toLocaleString().
3. Add a “Delete” button next to each comment.
