I am trying to render PromptCard component through my PrompCarList component in my NextJs App. But I am getting the error above. I logged the post to the console but it does not show the user data even I set ref to the ‘User’ in the models. Please can anyone help me to find the problem ?
this the result of console.log(post) in the PromptCard.jsx file
`{_id: '64770098152922e3f36c8414', prompt: 'Test prompt', tag: '#product', __v: 0}
prompt:"Test prompt"
tag:"#product"
__v:0
_id:"64770098152922e3f36c8414"
[[Prototype]]:Object`
I am wondering if it is working ref:’User’ code
//-----This is PromptCard.jsx file
import {useState} from 'react'
import Image from 'next/image'
import { useSession } from 'next-auth/react'
import { usePathname } from 'next/navigation'
const PromptCard = ({post,handleTagClick,handleEdit,handleDelete}) => {
console.log(post)
return (
<div className='prompt_card'>
<div className='flex justify-between items-start gap-5'>
<div className='flex-1 flex justify-start items-center gap-3 cursor-pointer'>
<Image src={post.creator.image} alt='user_image' width={40} height={40} className='rounded-full object-contain'/>
<div className='flex flex-col'>
<h3 className='font-satoshi font-semibold text-gray-900'>{post.creator.username}</h3>
<p>{post.creator.email}</p>
</div>
</div>
</div>
</div>
)
}
export default PromptCard;
//----------------------
this is Feed.jsx file
import {useState,useEffect} from 'react'
import PromptCard from './PromptCard'
const PromptCardList=({data,handleTagClick})=>{
console.log(data)
return (
<div className='mt-16 prompt_layout'>
{data.map((post)=>{
return (
<PromptCard key={post._id} post={post} handleTagClick={handleTagClick} />
)
})}
</div>
)
}
const Feed = () => {
const [allPosts,setAllPosts]=useState([])
const [searchText,setSearchText]=useState('');
const handleSearchChange=(e)=>{}
useEffect(()=>{
const fetchPosts=async()=>{
const respone= await fetch('/api/prompt')
const data= await respone.json()
setAllPosts(data)
}
fetchPosts()
},[])
return (
<section className='feed'>
<form className='relative w-full flex-center'>
<input
type='text'
placeholder='Search for a tag or a username'
value={searchText}
onChange={handleSearchChange}
required
className='search_input peer'
/>
</form>
<PromptCardList data={allPosts} handleTagClick={()=>{}}/>
</section>
)
}
export default Feed;
--------------------MODELS---------------
`import { Schema, model, models } from 'mongoose';
const PromptSchema = new Schema({
creator: {
type: Schema.Types.ObjectId,
ref: 'User',
},
prompt: {
type: String,
required: [true, 'Prompt is required.'],
},
tag: {
type: String,
required: [true, 'Tag is required.'],
}
});
const Prompt = models.Prompt || model('Prompt', PromptSchema);
export default Prompt;
import {Schema,model,models} from 'mongoose'
const UserSchema= new Schema({
email:{
type:String,
unique:[true,'Email already exists'],
required:[true,'Email is required'],
},
username:{
type:String,
required:[true,'Username is required'],
match:[/^(?=.{8,20}$)(?![_.])(?!.*[_.]{2})[a-zA-Z0-9._]+(?<![_.])$/, "Username invalid, it should contain 8-20 alphanumeric letters and be unique!"]
},
image:{
type:String,
}
})
const User=models.User || model('User',UserSchema)
export default User;`
