Відео

const data = [ { "id": 1, "name": "Emily Chen", "age": 28, "occupation": "Software Engineer" }, { "id": 2, "name": "Ryan Thompson", "age": 32, "occupation": "Marketing Manager" }, { "id": 3, "name": "Sophia Patel", "age": 25, "occupation": "Data Analyst" }, { "id": 4, "name": "Michael Lee", "age": 41, "occupation": "CEO" }, { "id": 5, "name": "Olivia Brown", "age": 29, "occupation": "Graphic Designer" }, { "id": 6, "name": "Alexander Hall", "age": 38, "occupation": "Sales Representative" }, { "id": 7, "name": "Isabella Davis", "age": 26, "occupation": "Teacher" }, { "id": 8, "name": "Ethan White", "age": 35, "occupation": "Lawyer" }, { "id": 9, "name": "Lily Tran", "age": 30, "occupation": "Nurse" }, { "id": 10, "name": "Julian Sanchez", "age": 39, "occupation": "Engineer" }, { "id": 11, "name": "Ava Martin", "age": 27, "occupation": "Journalist" }, { "id": 12, "name": "Benjamin Walker", "age": 42, "occupation": "Doctor" }, { "id": 13, "name": "Charlotte Brooks", "age": 31, "occupation": "HR Manager" }, { "id": 14, "name": "Gabriel Harris", "age": 36, "occupation": "IT Consultant" }, { "id": 15, "name": "Hannah Taylor", "age": 24, "occupation": "Student" }, { "id": 16, "name": "Jackson Brown", "age": 40, "occupation": "Business Owner" }, { "id": 17, "name": "Kayla Lewis", "age": 33, "occupation": "Event Planner" }, { "id": 18, "name": "Logan Mitchell", "age": 37, "occupation": "Architect" }, { "id": 19, "name": "Mia Garcia", "age": 29, "occupation": "Artist" }, { "id": 20, "name": "Natalie Hall", "age": 34, "occupation": "Teacher" }, { "id": 21, "name": "Oliver Patel", "age": 38, "occupation": "Software Developer" }, { "id": 22, "name": "Penelope Martin", "age": 26, "occupation": "Writer" }, { "id": 23, "name": "Quinn Lee", "age": 35, "occupation": "Software Developer" }, { "id": 24, "name": "Rachel Kim", "age": 30, "occupation": "Dentist" }, { "id": 25, "name": "Samuel Jackson", "age": 42, "occupation": "Lawyer" }, { "id": 26, "name": "Tessa Hall", "age": 28, "occupation": "Graphic Designer" }, { "id": 27, "name": "Uma Patel", "age": 39, "occupation": "Marketing Manager" }, { "id": 28, "name": "Vincent Brooks", "age": 36, "occupation": "IT Consultant" }, { "id": 29, "name": "Walter White", "age": 41, "occupation": "Engineer" }, { "id": 30, "name": "Xavier Sanchez", "age": 33, "occupation": "Sales Representative" }, { "id": 31, "name": "Yvonne Martin", "age": 29, "occupation": "Teacher" }, { "id": 32, "name": "Zoe Lee", "age": 27, "occupation": "Data Analyst" }, { "id": 33, "name": "Abigail Brown", "age": 34, "occupation": "Nurse" }, { "id": 34, "name": "Caleb Harris", "age": 38, "occupation": "Software Developer" }, { "id": 35, "name": "Diana Taylor", "age": 31, "occupation": "Event Planner" }, { "id": 36, "name": "Eleanor Walker", "age": 40, "occupation": "CEO" } ]

code :- import React, { useState } from "react"; import "./App.css"; const Comment = ({ comment }) => { const [showReplies, setShowReplies] = useState(false); const [replyText, setReplyText] = useState(""); const [replies, setReplies] = useState(comment.replies || []); const handleAddReply = () => { if (replyText.trim()) { setReplies([...replies, { text: replyText, replies: [] }]); setReplyText(""); } }; return ( <div className="comment-container"> <p>{comment.text}</p> <button onClick={() => setShowReplies(!showReplies)}> {showReplies ? "Hide replies" : "Show replies"} </button> {showReplies && ( <div className="comment-replies"> <textarea value={replyText} onChange={(e) => setReplyText(e.target.value)} placeholder="Write a reply..." /> <button className="reply-button" onClick={handleAddReply}> Add Reply </button> {replies.map((reply, index) => ( <Comment key={index} comment={reply} /> ))} </div> )} </div> ); }; const CommentSection = () => { const [comments, setComments] = useState([ { text: "This is a comment", replies: [] }, { text: "This is another comment", replies: [] }, { text: "This is another comment", replies: [] }, ]); const [newCommentText, setNewCommentText] = useState(""); const handleAddComment = () => { if (newCommentText.trim()) { setComments([...comments, { text: newCommentText, replies: [] }]); setNewCommentText(""); } }; return ( <> <textarea value={newCommentText} onChange={(e) => setNewCommentText(e.target.value)} placeholder="Add a new comment..." /> <button onClick={handleAddComment}>Add Comment</button> {comments.map((comment, index) => ( <Comment key={index} comment={comment} /> ))} </> ); }; function App() { return ( <div className="App"> <h1>Nested Comments and Replies</h1> <CommentSection /> </div> ); } export default App;

medium article with source code :- medium.com/@anjalitejasvi501/creating-an-infinite-scroll-feature-for-your-web-application-5b0bf0b446a8