Not Rendering Component From Iterated Array in JSX-CodePudding

I have a project variable which follows this structure:

[
    org_id_1: {
        project_id_1: {
            title: ...
        },
        project_id_2: {
            title: ...
        }
    },
    org_id_2: {
        ...
    }
]

In my JSX, I want to display a ProjectCard component for each extracted project. I successfully loop through this structure to each individual project, but the component does not render. My code:

<div className='flexbox...'>
    {
        projects && Object.keys(projects).map(organisationId => {
            const projectsArray = projects[organisationId]
            projectsArray.map(project => {
                return <ProjectCard key={project.id} project={project} />
            })
        })
    }
</div>

I know for sure that I'm iterating through the projects because when I console.log(project), or console.log(project.title) just before the return statement, I can see the correct values show up.

CodePudding user response：

Try returning the outer map as the inner scope has a correct return but the outer one isn't returning anything

CodePudding user response：

You are suppose to put a return inside the .map()