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.