I am having problems mapping through a json array to produce individual li’s of the array items in astrojs. I was able to successfully map over a card component I made and was able to target specific elements to dynamically pull in json data but I am having trouble with doing the same with the li’s. I am able to pull in the json data but it does not showcase as individual li’s. All of the data shows up in one li oppose to individual li’s. A snippet of my json array and astrojs file code are below.

File: portData.json

"roleList": [ "UX/UI & Strategy", "Art Direction", "Prototyping" ],

File: astrojs code

<ul class="list-none text-base font-light">
   {
     portData.map((portData) => {
       return ( 
         <li>{portData.roleList}</li>
        )
     })
   }