Блог

Итак, я использую react, nodejs и mongodb для создания базового приложения для блога.

До сих пор мне удавалось добавлять функцию комментариев, и пользователи могли создавать, удалять и редактировать комментарии. Но я хотел добавить возможность отвечать на комментарий. Я добавил текст «Ответа» внутри области, в которой я сопоставил массив комментариев в своем react.js компонент. Поэтому, когда вы нажимаете на «Ответить», он переключает текстовое поле для ответа. Это означает, что при первом щелчке появляется текстовое поле для ответа на конкретный комментарий, при втором щелчке это текстовое поле скрывается. Проблема теперь в том, что переключатель работает для всего сопоставленного массива комментариев. Я пытаюсь присвоить определенный » _id «тексту» Ответа «и передать его в текстовое поле, чтобы пользователь написал свой ответ на этот конкретный комментарий, используя «_id». Это должно предотвратить одновременное переключение текстового поля ответа для всех комментариев. Как лучше всего я могу это сделать? Вот мои коды:

Состояние использования, которое скрывает и отображает текстовое поле

  const [showReply, setShowReply] = useState(false)
 

Функция, которая переключает состояние использования

  const handleShowReplyComment = (id) =>{
console.log(id)
if(id){
    setShowReply(!showReply)
    console.log(id)
}

}
 

Эта функция выбирает » _id » комментария, который я щелкнул. Но как передать этот » _id » в текстовое поле-моя задача.

   return (
    <div className="comment">
        <h5 className='users-comment'>Users comments</h5>
            {comments.map((singleComment, index)=>{
                console.log(singleComment)
                const {author, commentdescription, _id, createdAt} = singleComment
                
                return(
                    <>

                        {updateComment == _id ? 
                         <div className='comment-div' key={_id} >
        
                    <textarea className='comment-wrapper' type='text' 
                    onChange={(e) => setCommentDescription(e.target.value)} value={commentdescription2}>

                    </textarea>
                    <button className={isLoading ? 'comment-btn-no-cursor comment-btn': 'comment-btn'}onClick={() => handleCommentUpdate(_id)}>Update Post</button>
                    {error amp;amp; <p>what happened?</p> }
                    </div>
                        :
                         <div className='displayed-comments'key={_id}>
                            
                            <div className="commentPic">
                                
                                <img className="user-pics" src={PF   singleComment.author.profilePicture} alt="" />
                                  
                            </div>
                            <div className="comment-info">
                                <div className="comment-author-div">
                                    <div className='comment-author-date-info'>
                                        <h4 className="comment-author">{singleComment.author.username}</h4>
                                         <p className="comment-date">{new Date(singleComment.createdAt).toDateString()}
                                            </p>
                                    </div>
                                   {
                                       singleComment.author.username == user?.username amp;amp;  <div className="comment-edit-delete-div">
                                         <i className="singlePostIcon fas fa-edit" onClick={() => {setUpdateComment(_id); setCommentDescription(commentdescription)}}  ></i>
                                            <i className={isLoading? "cursor-not-allowed singlePostIcon far fa-trash-alt":"singlePostIcon far fa-trash-alt" } onClick={() => handleCommentDelete(_id)}  ></i>

                                    </div>
                                   }
                                   
                                </div>
                                <p className="comment-content">{singleComment.commentdescription}</p>
                                <div>
                                    
                                </div>
                                <h5 className="reply-comment" onClick={() => handleShowReplyComment(_id)}>Reply</h5> //this is the text with the toggle onClick function that toggles the useState called 'showReply'
                                
                                {showReply amp;amp;  <div className='reply-div'>//this is the textbox with the useState 'showReply'.
                                    <textarea className='comment-wrapper '>


                                    </textarea>
                                </div>}
                               
                            </div>
                            
                            
                        </div>
                    
                        }
                         </>
                )
          
            })}

    </div>
)