Rendering each object of an array, which is a value to a key in react

Question

I am super new to React and here is issue I am facing. I have an Object features

    const features = [
      {
        name: 'Sample text',
        description:'Sample text',
        icon: LightningBoltIcon,
        tags: ['Ruby on Rails', 'Bulma', 'PostgreSQL', 'JS', 'jQuery'],
        link: "https://xxx.xxx/",
        linkname: ' ━━━━━━ samlple.link',
      },
      {
        name: 'Education 3.0',
        description: 'Sample text 2',
        icon: AcademicCapIcon,
        tags: ['Ruby on Rails', 'Bulma', 'PostgreSQL', 'JS', 'jQuery'],
        link: "https://xxxxxx.com/",
        linkname: ' ━━━━━━ sample.link'
      },
    ]

So, I am rendering features and it works for everything, except the Tags.

    <dl className="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
        {features.map((feature) => (
           <div key={feature.name} className="relative">
               <dt>
                 <div className="absolute bg-indigo-500 text-white">
                    <feature.icon className="h-6 w-6" aria-hidden="true" />
                  </div>
                  <p className="ml-16 text-lg leading-6 font-medium">{feature.name}</p>
                </dt>
                <dd className="mt-2 ml-16 text-base text-gray-500">{feature.description}</dd>
                <span className="text-sm rounded align-middle">{feature.tags.map(...)}</span>
                <div className="text-right mt-10">
                   <a href={feature.link}  target="_blank" style={{color: "#6466F1"}} >
                      {feature.linkname}
                   </a>
                 </div>            
            </div>
         ))}
    </dl>

So, basically I can't map feature.tags. I tried with the variable inside of the render part, like

const tags = feature.tags;
   {tags.map((tag) => (
     <span className="text-sm rounded align-middle">{tag}</span>
   ))

it didn't work ... How do I proceed?

Answer 1

You don't need to declare variable inside the render part, you just need to place the map in the right place, try this:

{features.map((feature) => (
           <div key={feature.name} className="relative">
               <dt>
                 <div className="absolute bg-indigo-500 text-white">
                    <feature.icon className="h-6 w-6" aria-hidden="true" />
                  </div>
                  <p className="ml-16 text-lg leading-6 font-medium">{feature.name}</p>
                </dt>
                <dd className="mt-2 ml-16 text-base text-gray-500">{feature.description}</dd>
                {feature.tags.map((tag) => (
     <span className="text-sm rounded align-middle">{tag}</span>
   ))
                <div className="text-right mt-10">
                   <a href={feature.link}  target="_blank" style={{color: "#6466F1"}} >
                      {feature.linkname}
                   </a>
                 </div>            
            </div>
         ))}