How to display a list of objects in ReactJs-CodePudding

I am trying to display a list in react. I have successfully fetched the data from the backend. Here is my console.log response

0: {_id: '6170400972c5ba31e46c2d69', projectId: '60019df7167f2238c07c4e25', projectName: 'Sarafina', projectLocation: 'Nigeria', email: '[email protected]', …}
1: {_id: '617048567b7747364c06bb40', projectId: '60019df7167f2238c07c4e25', projectName: 'Sarafina2', projectLocation: 'South Africa', email: '[email protected]', …}
length: 2
[[Prototype]]: Array(0)

But when I try to show the list, It's empty.

here is where I fetched the data from the backend

useEffect(()=>{
  const fetchProject= async()=>{
     setLoading(true)
  const res= await axios.get(`/api/v1/project/${auth.user.id}`,
  {
   
  });

  if(res.data){
    setProjectData(res.data);      
    setLoading(false)                
   console.log(res.data)
  }else{
    setOpen(true)
  }
   
  }
fetchProject();                 
},[])  
  
............. // other lines of code

 return (
      <>
       {projectData.map(project => {
        return <DashboardProjectList  key={project.email} project={project}/> 
      })}  
     </>
)

And here is the DashboardProjectList component


export default function DashboardProjectList(project) {   
  

return(
<>   
{project.projectName}

</>
)
}

The list is not displayed. I would appreciate it if someone can help me figure out what am doing wrong.

CodePudding user response：

Please add console.log(project) to DashboardProjectList component.

export default function DashboardProjectList({ project }) {   
    return(
       <>   
         {project.projectName}
       </>
    )
}

export default function DashboardProjectList(props) {   
    return(
       <>   
         {props.project.projectName}
       </>
    )
}