dynamically generate react components from data from an object as props

Context: trying to build a simple todo list app in react and typescript for educational purposes.

What I'm trying to do: Render as many ProjectMenuItem components as there are individual projects in my projects object, using the title of the project as props to pass into the components. "Project 1, Project 2, Project 3" should render to the screen as p elements.

What happens instead: The app does not compile and I get an error saying: Uncaught Error: Objects are not valid as a React child (found: object with keys {projectName}). If you meant to render a collection of children, use an array instead.

ProjectMenuItem component:

export function ProjectMenuItem(projectName: any){

    return(
        <p>{projectName}</p>
    );

}

Parent Component:

export function ProjectList(){
    
    const projects = {
        project1: {
            title: 'Project 1',
        },
        project2: {
            title: 'Project 2',
        },
        project3: {
            title: 'Project 3',
        },
    };
    
    function generateProjectMenuItems() {
        const projectMenuItems = [];
        for (const project in projects) {
            const projectName: string = projects[project as keyof typeof projects].title;
            projectMenuItems.push(<ProjectMenuItem projectName={projectName} />);
        }
        
        return projectMenuItems;
    }

    return(
        <div className="project-list flexbox">
            <p>project components go here</p>
            {generateProjectMenuItems()}
            
        </div>
    )
}

Have tried: I know it is saying I should use it as an array, so I tried mapping the projectMenuItems array to an array of span elements containing the components, but this results in the same error message.

return projectMenuItems.map(el => <span className="project-span" key={Math.random().toString()}>{el}</span>);

TL;DR I am trying to generate components for each object in a larger object and I'm not sure what I'm doing wrong. Very new to react.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/vi8OAwB