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>
)
})
}
1