'TypeError: Cannot read properties of undefined (reading 'map') on React JS

I am using ReactJS and I can not figure out why "whotofollow.map keeps throwing me errors.

Here is my code:

import React from 'react'
import { news, whoToFollow } from '../library/static'
import { BiSearch } from 'react-icons/bi'

const style = {
    wrapper: `flex-[1] p-4`,
    searchBar: `flex items-center bg-[#243340] p-2 rounded-3xl`,
    searchIcon: `text-[#8899a6] mr-2`,
    inputBox: `bg-transparent outline-none`,
    section: `bg-[#192734] my-6 rounded-xl overflow-hidden`,
    title: `p-2 font-bold text-lg`,
    showMore: `p-2 text-[#1d9bf0] text-sm cursor-pointer hover:bg-[#22303c]`,
    item: `flex items-center p-3 my-2 hover:bg-[#22303c] cursor-pointer`,
    newsItemLeft: `flex-1`,
    newsItemCategory: `text-[#8899a6] text-xs font-semibold`,
    newsItemTitle: `text-sm font-bold`,
    newsItemRight: `w-1/5 ml-3`,
    newsItemImage: `rounded-xl h-14 w-14 object-cover`,
    followAvatarContainer: `w-1/6`,
    followAvatar: `rounded-full h-[40px] w-[40px]`,
    profileDetails: `flex-1`,
    name: `font-bold`,
    handle: `text-[#8899a6]`,
    followButton: `bg-white text-black px-3 py-1 rounded-full text-xs font-bold`,
  }
  
const Widgets = () => {
    return (
            <div className= {style.wrapper}>
            <div className = {style.searchBar}>
             <BiSearch className= {style.searchIcon} />
             <input type= "text" 
                    placeholder= "Search Twitter" 
                    className= {style.input}
                    />
             </div>
             <div className= {style.section}>
             <div className= {style.title}>What's happening</div>
             {news.map((item,index) => (
                 <div key= {index} className={style.item}>
                        <div className= { style.newsItemLeft}>
                        <div className= { item.newsItemCategory}>{item.category}</div>
                        <div className= { item.newsItemTitle}>{item.title}</div>
                </div>
                        <div className= {style.newsItemRight}>
                            <img 
                            src= {item.image} 
                            alt= {item.catergory}
                            className= {style.newsItemImage}
                        />
                    </div>
                    </div>
             ))}
                    <div className =  {style.showMore}></div>
                    </div>
            <div className = {style.section}>
            
            <div className={style.title}>whoToFollow</div> 
                        {whoToFollow.map((item, index) => (
            
            <div key={index} className= {style.item}>
            <div className = {style.followAvatarContainer}>
                            <img 
                                src= {item.avatar} 
                                alt= {item.handle} 
                                className= {style.followAvatar} 
                            />
                            </div>
                            <div>
            <div className={style.name}>{item.handle}</div>
            <div className={style.handle}>{item.name}</div>
            </div>
            <div classname={style.followButton}>Follow</div>
                    </div>

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

export default Widgets

Solution 1:^[1]

I did not export const "whoToFollow" in a separate file from the static module.

export const whoToFollow = [ { name: 'Rafeh Qazi', handle: '@cleverqazi', avatar: 'https://pbs.twimg.com/profile_images/1472075657920221184/JhAI3WGm_400x400.jpg', }, { name: 'David Rakosi', handle: '@0xDavidRakosi', avatar: 'https://pbs.twimg.com/profile_images/1282571486465855491/98xO6N0F_400x400.jpg', }, { name: 'Sanity.io', handle: '@sanity_io', avatar: 'https://avatars.githubusercontent.com/u/17177659?s=280&v=4', }, ]

Solution 2:^[2]

Replace following code with widgets.js

import React from "react";
import { news, whoToFollow } from "../library/static";
import { BiSearch } from "react-icons/bi";

const style = {
  wrapper: `flex-[1] p-4`,
  searchBar: `flex items-center bg-[#243340] p-2 rounded-3xl`,
  searchIcon: `text-[#8899a6] mr-2`,
  inputBox: `bg-transparent outline-none`,
  section: `bg-[#192734] my-6 rounded-xl overflow-hidden`,
  title: `p-2 font-bold text-lg`,
  showMore: `p-2 text-[#1d9bf0] text-sm cursor-pointer hover:bg-[#22303c]`,
  item: `flex items-center p-3 my-2 hover:bg-[#22303c] cursor-pointer`,
  newsItemLeft: `flex-1`,
  newsItemCategory: `text-[#8899a6] text-xs font-semibold`,
  newsItemTitle: `text-sm font-bold`,
  newsItemRight: `w-1/5 ml-3`,
  newsItemImage: `rounded-xl h-14 w-14 object-cover`,
  followAvatarContainer: `w-1/6`,
  followAvatar: `rounded-full h-[40px] w-[40px]`,
  profileDetails: `flex-1`,
  name: `font-bold`,
  handle: `text-[#8899a6]`,
  followButton: `bg-white text-black px-3 py-1 rounded-full text-xs font-bold`,
};

const Widgets = () => {
  return (
    <div className={style.wrapper}>
      <div className={style.searchBar}>
        <BiSearch className={style.searchIcon} />
        <input
          type="text"
          placeholder="Search Twitter"
          className={style.input}
        />
      </div>
      <div className={style.section}>
        <div className={style.title}>What's happening</div>
        {news && news.length
          ? news.map((item, index) => (
              <div key={index} className={style.item}>
                <div className={style.newsItemLeft}>
                  <div className={item.newsItemCategory}>{item.category}</div>
                  <div className={item.newsItemTitle}>{item.title}</div>
                </div>
                <div className={style.newsItemRight}>
                  <img
                    src={item.image}
                    alt={item.catergory}
                    className={style.newsItemImage}
                  />
                </div>
              </div>
            ))
          : null}
        <div className={style.showMore}></div>
      </div>
      <div className={style.section}>
        <div className={style.title}>whoToFollow</div>
        {whoToFollow && whoToFollow.length
          ? whoToFollow.map((item, index) => (
              <div key={index} className={style.item}>
                <div className={style.followAvatarContainer}>
                  <img
                    src={item.avatar}
                    alt={item.handle}
                    className={style.followAvatar}
                  />
                </div>
                <div>
                  <div className={style.name}>{item.handle}</div>
                  <div className={style.handle}>{item.name}</div>
                </div>
                <div classname={style.followButton}>Follow</div>
              </div>
            ))
          : null}
      </div>
    </div>
  );
};

export default Widgets;

And whoToFollow array should be in this format

const whoToFollow = [
  {
    image: 'image_url_1',
    name: 'name_1',
    handle: 'handle_1',
  },
  {
    image: 'image_url_2',
    name: 'name_2',
    handle: 'handle_2',
  },
  {
    image: 'image_url_3',
    name: 'name_3',
    handle: 'handle_3',
  },
]

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Isuru Chandrasiri

'TypeError: Cannot read properties of undefined (reading 'map') on React JS

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]