TypeError: comments.map is not a function ReactJs instagram clone

Im a very beginner in ReactJs and i’m working on an instagram clone where i found this error and can’t fix it at the moment after a lot of searches in stackoverflow and google as well.

the ERROR: TypeError: comments.map is not a function

{comments.map((comment) => (

Here’s all the code:

import React, { useEffect, useState } from 'react';
import './Post.css'
import { db } from './firebase'
import Avatar from '@material-ui/core/Avatar'
import firebase from 'firebase'

function Post({ postId, user, username, caption, imageUrl }) {
    const [comments, setComments] = useState([])
    const [comment, setComment] = useState('')

    useEffect(() => {
        let unsubscribe;
        if (postId) {
            unsubscribe = db
            .collection("posts")
            .doc(postId)
            .collection("comments")
            .orderBy('timestamp', 'desc')
            .onSnapshot((snapshot) => {
                setComments(snapshot.docs.map((doc) => doc.data()));
            })
        }

        return () => {
            unsubscribe();
        };
     }, [postId]);

    const postComment = (event) => {
        event.preventDefault();

        db.collection("posts").doc(postId).collection("comments").add({
            text: comment,
            username: user.displayName,
            timeStamp: firebase.firestore.FieldValue.serverTimestamp()
        });
        setComment('');
    }

    return (
        <div className="post">
            <div className="post__header">
                <Avatar className="post__avatar"
                alt="RafehQazi"
                src="static/images/avatar/1.jpg"/>
            
            <h3>{username}</h3>

            </div>
            
            <img className="post__image" src={imageUrl} alt=""/>
            <h4 className='post__text'><strong>{username} </strong> {caption} </h4>

            <div className="post__comments">
                {comments.map((comment) => (
                    <p>
                        <strong>{comment.username}</strong> {comment.text}
                    </p>
                ))}
            </div>

            <form className="post__commentBox">
                <input 
                    type="text"
                    className="post__input"
                    placeholder="Add a comment..."
                    value={comment}
                    onChange={(e) => setComments(e.target.value)}
                />
                <button
                className="post__button"
                
                type="submit"
                onClick={postComment}
                >
                Post</button>
            </form>

        </div>
    ) 
}

export default Post

Answer

You are setting a string to your array comments

<input 
                    type="text"
                    className="post__input"
                    placeholder="Add a comment..."
                    value={comment}
                    onChange={(e) => setComments(e.target.value)}
                />

replace this setComments to setComment

Advertisement

Answer