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