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?

Can you share exactly where did you add the last part of the code? — Nishant Nair
– Nishant Nair, Commented Apr 26, 2021 at 6:53
Inspect the rendered HTML in your browser. Also, is the span wrapper required here. <span className="text-sm rounded align-middle">{feature.tags.map(...)}</span>. Each tag inside feature.tags also has the same class — adiga
– adiga, Commented Apr 26, 2021 at 6:54
<dd className="mt-2 ml-16 text-base text-gray-500">{feature.description}</dd> {feature.tags.map((tag) => ( <span className="text-sm font-medium bg-green-100 py-1 px-2 rounded text-green-500 align-middle">{tag}</span> ))} <div className="text-right mt-10"> . So the error is: Cannot read property 'map' of undefined — Katharina Schreiber
– Katharina Schreiber, Commented Apr 26, 2021 at 6:58

Ihsan Fajar Ramadhan · Accepted Answer · 2021-04-26 06:57:48Z

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

answered Apr 26, 2021 at 6:57

Ihsan Fajar Ramadhan

1,1111 gold badge12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Katharina Schreiber Over a year ago

oops, I just didn't add the Tags to every feature, that is why it was complyining! Thanks!!!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related