Looping through array within Sanity Io React

Question

I'm using react with sanity io to create a portfolio page. I would like to create an unordered list according to how many tags I have a on a project. A project is composed of a title, image, description, and tags(this is just an array).

What I have tried is:

{project.tags.map(type => {
    return (
       <li>{type.type.name}</li>
       )
})}

And I keep getting the error: "TypeError: project.forEach is not a function". If I just render

{project.tags}

all of the tags are displayed but then I can't style them hence the need to put them into a list.

Does anyone know how to accomplish this?

import React, { useEffect, useState} from "react";
import sanityClient from "../client.js";
import '../index.css';


export default function Project() {
    const [projectData, setProjectData] = useState(null);

    useEffect(() => {
        sanityClient.fetch(`*[_type == "project"] | order(index) {
            title,
            mainImage{
                asset->{
                    _id,
                    url
                },
            },
            description,
            projectType,
            link,
            tags
        }`).then((data) => setProjectData(data)).catch(console.error);
    }, []);

    return (
        <div className="antialiased text-gray-800 bg-gray-400">
            <div className="container relative flex flex-col px-6 mx-auto space-y-8">
                <div className="absolute inset-0 z-0 w-2 h-full bg-white shadow-md left-38 md:mx-auto md:right-0 md:left-0"></div>
                {projectData && projectData.map((project, index)=> (
                <div className="relative z-10 p-10 ">
                    <img src={project.mainImage.asset.url} alt={project.mainImage.alt} className="timeline-img" />
                    <div className={`${index % 2 === 0 ? "timeline-container-left timeline-container" : "timeline-container" }`} >
                        <p className="font-bold uppercase">{project.title}</p>
                        <div className={`${index % 2 === 0 ? "timeline-pointer-left timeline-pointer" : "timeline-pointer" }`} aria-hidden="true"></div>
                        <div className="p-6 bg-white rounded-md shadow-md sm:p-2">
                            <p className="pt-1">{project.description}</p>
                        </div>
                        

                    </div>
                </div>  
                ))}
            </div>
        </div>
    )
}

Answer 1

{project.tags.map( type => (

{type}

))} is the answer.