score:1

Accepted answer

you need to have another .map();

<div classname="">
  {data.map(el => (
    el.tech.map(currtech => (
      <span classname="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">
        {currtech}
      </span>
    ))        
  ))}
</div>

score:0

from your code, you can see that you're just outputting the array at {tech.tech}: try this, assuming you already created the component as pill and data hold the array of project objects; i am also assuming this is a project component and the pill component lives in it, then:

<div classname="">
    {data.map(project => (
        <span classname="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">
            {project.tech.map(t => <pill tech={t} />)}
        </span>
    ))}
</div>

Related Query

More Query from same tag