I'm trying to use .map method on an array and I get the error "tweetsData.map is not a function".

I have created a state of const [tweetsData, setTweetsData] = useState([]), and in the front end, this outputs as tweetsData.map is not a function.

Tried setting up multiple different ways, still not working and at this point, It's been a bit frustrating.

import React, { useEffect, useContext, useState } from 'react';

import { Link, useParams } from 'react-router-dom';

import Axios from 'axios';

import StateContext from '../StateContext';

function Profile() {
    const appState = useContext(StateContext);
    const { username } = useParams();
    const [profileData, setProfileData] = useState({
        username: '...',
        name: '...',
        surname: '...',
        avatar: 'https://gravatar.com/avatar/placeholder?s=128',
        isFollowing: false,
        isVerified: false,
        profileCounts: { postCount: '', followerCount: '', followingCount: '' },
    });


        
   // HERE -> I declared the array and trying to use the .math method.
    const [tweetsData, setTweetsData] = useState([]);

    const [isLoading, setIsLoading] = useState(true);


    useEffect(() => {
        async function fetchData() {
            try {
                const res = await Axios.post(
                    `http://localhost:2000/api/profile/${username}`,
                    config
                );
                const { posts, userProfile } = res.data;

                setProfileData({
                    username: userProfile[0].username,
                    name: userProfile[0].name,
                    surname: userProfile[0].surname,
                    avatar: userProfile[0].avatar,
                    isFollowing: userProfile[0].isFollowing,
                    isVerified: userProfile[0].isVerified,
                    profileCounts: userProfile[0].profileCounts,
                });
                setTweetsData({
                    posts,
                    ...posts,
                });
                console.log(tweetsData);
                setIsLoading(false);
            } catch (e) {
                console.log(e.message);
            }
        }
        fetchData();
    }, []);

    return (
    
// here trying to render a div for every element.
            {tweetsData.map((post) => {
                return (
                    <div className="main-view__user-feed">
                        <img src="./img/8.jpeg" alt="image tweet"></img>
                        <div className="main-view__user-feed__author">
                            <div className="name">
                                <h2>
                                    {post.name} {post.surname}
                                </h2>
                                <a href="#" className="username__author">
                                    @{post.username}
                                </a>
                                <span> 9 June</span>
                            </div>
                            <a href="/ViewPost.html" className="author_post-viewpost">
                                {post.text}
                            </a>
                            <div className="icons">
                                <section>
                                    <li className="top-nav__item top-nav__item--active">
                                        <a href="#" className="top-nav__link">
                                            <svg className="top-nav__icon">
                                                <use xlinkHref="img/sprite.svg#icon-bubble2"></use>
                                            </svg>
                                            <span>3</span>
                                        </a>
                                    </li>
                                </section>

                                <section>
                                    <li className="top-nav__item top-nav__item--active">
                                        <a href="#" className="top-nav__link">
                                            <svg className="top-nav__icon">
                                                <use xlinkHref="img/sprite.svg#icon-loop2"></use>
                                            </svg>
                                            <span>4</span>
                                        </a>
                                    </li>
                                </section>

                                <section>
                                    <li className="top-nav__item top-nav__item--active">
                                        <a href="#" className="top-nav__link">
                                            <svg className="top-nav__icon">
                                                <use xlinkHref="img/sprite.svg#icon-heart"></use>
                                            </svg>
                                            <span>25</span>
                                        </a>
                                    </li>
                                </section>

                                <section>
                                    <li className="top-nav__item top-nav__item--active">
                                        <a href="#" className="top-nav__link">
                                            <svg className="top-nav__icon">
                                                <use xlinkHref="img/sprite.svg#icon-books"></use>
                                            </svg>
                                        </a>
                                    </li>
                                </section>
                            </div>
                        </div>
                    </div>
                );
            })}

        </main>
    );
}

export default Profile;

CodePudding user response：

You are receiving that error because posts is not an array, which your code proves because you are setting it equal to an object {} and map only works on arrays, so henceforth the error

setTweetsData({posts, ...posts});

change the code to

setTweetsData(posts);

CodePudding user response：

you can use optional chaining in try render tweetsData

{tweetsData?.map((post) => {
 //code)}