how to use this map function in React to call url with images name

Question

  socialLinks: {
    instagram: 'https://twitter.com/xyz',
    facebook: 'https://facebook.com/xyz',
    linkedin: '#',
  },

how to create a loop so that result should come like this -

<div>
   <a href="https://instagram.com/xyz">
      <image src="instagram.png" />
   </a>
   <a href="https://facebook.com/xyz">
      <image src="facebook.png" />
   </a>
<div>

Note: If there is no link of linkedin then no link and image will come

mickl · Accepted Answer · 2022-05-25 10:24:25Z

1

You can take advantage of Object.entries:

<div>
    {
        Object.entries(socialLinks).filter(([k,v]) => v.startsWith("https:")).map(([k,v]) => 
            <a key={v} href={v}>
                <image src={`${k}.png`} />
            </a>
        )
    }
</div>

answered May 25, 2022 at 10:24

mickl

50.1k9 gold badges71 silver badges99 bronze badges

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

2 Comments

Nisha Kapoor Over a year ago

This fixes my requirement. Thanks Sir. Just one warning: 'k' is declared but its value is never read. Any thing missing !!

mickl Over a year ago

@NishaKapoor I guess it's because of this part: filter(([k,v]) => v.startsWith("https:")) you can use filter(kv => kv[1].startsWith("https:")) instead

Gulshan Prajapati · Accepted Answer · 2022-05-25 10:25:03Z

0

const SocialMedia = () => {
    let socialLink = {
        instagram: 'https://twitter.com/xyz',
        facebook: 'https://facebook.com/xyz',
        twitter: 'https://twitter.com/xyz'
    }
    return (
        <div>
            {
                Object.keys(socialLink).map((key, index) => {
                    return (
                        <a href={socialLink[key]} key={index}>
                            <image src={key+'.png'} />
                        </a>
                    )
                })
            }
        </div>
    )
}

answered May 25, 2022 at 10:25

Gulshan Prajapati

1,05312 silver badges13 bronze badges

Collectives™ on Stack Overflow

how to use this map function in React to call url with images name

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related