Map function gives me [object object] in react component

Viewed 26

hi i use Map to get items from My list of objects But when i render My Codes, it gives me an Error and saying object's not valid while i use map for My List Of Objects and it's working well and i don't know what can i do Please help Me to Solv This Problem . My List Of Objects:

import avatar from './avatar.jpg';
export const CompanyListItems=[
  {
    Name : "مهد کودک امام رضا",
    Avatar : avatar,
    NumberOfChildren : 120,
    Resume: ["اولین رزومه","دومین رزومه","سومین رزومه","چهاریمن رزومه","پنجمین رزومه","شیشمین رزومه ",
    "هفتمین رزومه"," هشتمین رزومه","نهمین رزومه"],
    Score : "",
    Achivement: ["اولین رزومه","دومین رزومه","سومین رزومه","چهاریمن رزومه","پنجمین رزومه","شیشمین رزومه ",
    "هفتمین رزومه"," هشتمین رزومه","نهمین رزومه",],
    About: "علیرضا توسلی استاد VIP استادبانک می‌باشد که تا به اینجا 2,940 جلسه برگزار کرده است و شاگردانش از او رضایت خیلی بالایی داشته‌اند. او می‌تواند به صورت حضوری در شهر تهران و به صورت آنلاین بر بستر اینترنت تدریس کند. این استاد همچنین موفق شده است مدرک دوره اخلاق حرفه‌ای تدریس را از استادبانک دریافت نماید. استاد علیرضا توسلی در گروه‌های درسی «ریاضی متوسطه اول» و «ریاضی دبیرستان و کنکور» تدریس خصوصی می‌کند."
   
  },
  {
    Name : "دارالقرآن الغدیر",
    Avatar : avatar,
    NumberOfChildren : 120,
    Resume: ["اولین رزومه","دومین رزومه","سومین رزومه","چهاریمن رزومه","پنجمین رزومه","شیشمین رزومه ",
    "هفتمین رزومه"," هشتمین رزومه","نهمین رزومه"],
    Score : "",
    Achivement: ["اولین رزومه","دومین رزومه","سومین رزومه","چهاریمن رزومه","پنجمین رزومه","شیشمین رزومه ",
    "هفتمین رزومه"," هشتمین رزومه","نهمین رزومه"],
    About: "علیرضا توسلی استاد VIP استادبانک می‌باشد که تا به اینجا 2,940 جلسه برگزار کرده است و شاگردانش از او رضایت خیلی بالایی داشته‌اند. او می‌تواند به صورت حضوری در شهر تهران و به صورت آنلاین بر بستر اینترنت تدریس کند. این استاد همچنین موفق شده است مدرک دوره اخلاق حرفه‌ای تدریس را از استادبانک دریافت نماید. استاد علیرضا توسلی در گروه‌های درسی «ریاضی متوسطه اول» و «ریاضی دبیرستان و کنکور» تدریس خصوصی می‌کند."
   
  },
  {
    Name : "مهد کودک لاله ها",
    Avatar : avatar,
    NumberOfChildren : 120,
    Resume: ["اولین رزومه","دومین رزومه","سومین رزومه","چهاریمن رزومه","پنجمین رزومه","شیشمین رزومه ",
    "هفتمین رزومه"," هشتمین رزومه","نهمین رزومه"],
    Score : "",
    Achivement: ["اولین رزومه","دومین رزومه","سومین رزومه","چهاریمن رزومه","پنجمین رزومه","شیشمین رزومه ",
    "هفتمین رزومه"," هشتمین رزومه","نهمین رزومه"],
    About: "علیرضا توسلی استاد VIP استادبانک می‌باشد که تا به اینجا 2,940 جلسه برگزار کرده است و شاگردانش از او رضایت خیلی بالایی داشته‌اند. او می‌تواند به صورت حضوری در شهر تهران و به صورت آنلاین بر بستر اینترنت تدریس کند. این استاد همچنین موفق شده است مدرک دوره اخلاق حرفه‌ای تدریس را از استادبانک دریافت نماید. استاد علیرضا توسلی در گروه‌های درسی «ریاضی متوسطه اول» و «ریاضی دبیرستان و کنکور» تدریس خصوصی می‌کند."
   
  },
  {
    Name : "مهد کودک ستاره ها ",
    Avatar : avatar,
    NumberOfChildren : 120,
    Resume: ["اولین رزومه","دومین رزومه","سومین رزومه","چهاریمن رزومه","پنجمین رزومه","شیشمین رزومه ",
    "هفتمین رزومه"," هشتمین رزومه","نهمین رزومه"],
    Score : "",
    Achivement: ["اولین رزومه","دومین رزومه","سومین رزومه","چهاریمن رزومه","پنجمین رزومه","شیشمین رزومه ",
    "هفتمین رزومه"," هشتمین رزومه","نهمین رزومه"],
    About: "علیرضا توسلی استاد VIP استادبانک می‌باشد که تا به اینجا 2,940 جلسه برگزار کرده است و شاگردانش از او رضایت خیلی بالایی داشته‌اند. او می‌تواند به صورت حضوری در شهر تهران و به صورت آنلاین بر بستر اینترنت تدریس کند. این استاد همچنین موفق شده است مدرک دوره اخلاق حرفه‌ای تدریس را از استادبانک دریافت نماید. استاد علیرضا توسلی در گروه‌های درسی «ریاضی متوسطه اول» و «ریاضی دبیرستان و کنکور» تدریس خصوصی می‌کند."
   
  }
]

this is the Component i used map (i highlighting the Issue Line ) :

const CompanyList = () => {
    const [ShowUser, setShowUser] = useState(true)
  return (
    <>

    <div className='m-16'>
        <Header
            category={"صحفه "}
            title={"لیست سازمان ها "}
        />
    </div>
    <div className='m-6'>
        <div className='Icons flex justify-center text-5xl'>
            <FcBusinessman onClick={() => setShowUser(true)}
                className={`mx-6 cursor-pointer 
            ${ShowUser ? 'bg-red-100 p-2 rounded-full' : ''} `} />
            <FcWorkflow onClick={() => setShowUser(false)}
                className={`mx-6 cursor-pointer 
            ${ShowUser ? '' : 'bg-red-100 p-2 rounded-full'} `} />
        </div>
        {/* //doctor list  */}
        <div className={`mt-8 ${ShowUser? "block": "hidden"}`}>
            {
                CompanyListItems.map((item, index) => (// *** in this Line is working Well ***
                    <COmpanyLIst1
                        key={index}
                        avatar={item.Avatar}
                        Name={item.Name}
                        Score={item.Score}
                        NumberOfChildren={item.NumberOfChildren}
                        Achivement={item.Achivement}
                        About={item.About}
                        Id={index}
                    />
                ))
            }
        </div>
        <div className={`mt-8 ${!ShowUser? "block": "hidden"} grid grid-cols-3 gap-5`}>
        {
                CompanyListItems.map((item, index) => ( // *** it's the Issue Line ***
                    <CompanyList2
                        key={index}
                        Avatar={item.Avatar}
                        Name={item.Name}
                        Score={item.Score}
                        Id={index}
                    />
                ))
            }
        </div>
    </div>
</>
  )
}

it's CompanyList2 Component :

const CompanyList2 = (Avatar, Name, Score, Id) => {
  console.log(Score); // undefined
  return (
    <div className=" mt-6 mx-auto a-box relative col-span-3 md:col-span-1">
      <div className="img-container">
        <div className="img-inner">
          <div className="inner-skew">
            <img src={Avatar}/>
          </div>
        </div>
      </div>
      <div className="text-container">
        <h3>{Name}</h3>
        <div className='text-xs my-2 font-extrabold'>
          <FaRegStarHalf
            className='text-yellow-400 ml-2 text-xl inline-block' />
          نمره روانشناس : {Score}
        </div>
      </div>
      <Link to={`/Dashboard/${Id}/Company`}>
        <button className='text-xs
                           text-white
                           w-36
                           bg-yellow-500 absolute -bottom-3 left-12 p-3 rounded-2xl
                            hover:bg-yellow-600
                             transition-all
                             ease-in-out duration-300
                             hover:rounded-3xl'>
          رفتن به صحفه دکتر
        </button>
      </Link>
    </div>
  )
}

these are My Errors ( if i erase the Name in the CompanyList2 it doesn't show me any Errors But All of My Props change to Undefined ):

Uncaught Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

The above error occurred in the <h3> component:

    at h3
    at div
    at div
    at CompanyList2
    at div
    at div
    at CompanyList (http://localhost:3000/main.010ca5560cf0b9d61403.hot-update.js:39:82)

Uncaught Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.
1 Answers

When you pass arguments into a component as props, like you did:

CompanyListItems.map((item, index) => (
                    <CompanyList2
                        key={index}
                        Avatar={item.Avatar}
                        Name={item.Name}
                        Score={item.Score}
                        Id={index}
                    />
                ))

The component declaration should receive one parameter which is props which you can use object destructuring on to access each value:

const CompanyList2 = ({ Avatar, Name, Score, Id }) => {
  // Destructure props object, don't define multiple parameters
  
return (
    <>
    </>
  )
}

Related