dynamic arrray map

[hmssameer55]

locales/en.ts

faqs: {
section1: [
{ label: "faq1", value: "faq1" },
{ label: "faq2", value: "faq2" },
],
section2: [{ label: "faq3", value: "faq3" }],
},

//how to map this dynamic data in a component if you can share an example usage it would be very helpful. Thanks in advance

[SamuelChojnacki]

same issue

[SamuelChojnacki]

exemple to resolve this :

`'use client';
import { GitHubLogoIcon, InstagramLogoIcon, LinkedInLogoIcon, TwitterLogoIcon } from '@radix-ui/react-icons';
import { useTranslations } from 'next-intl';

// Type des clés du dictionnaire
type SocialKey = 'linkedin' | 'instagram' | 'twitter' | 'github';

// Composant SocialLinks
const SocialLinks = ({ className }: { className?: string }) => {
const b = useTranslations('social');

// Map des icônes associées à chaque réseau
const icons: Record<SocialKey, JSX.Element> = {
instagram: ,
linkedin: ,
twitter: ,
github :
};

const socialKeys: SocialKey[] = ['linkedin', 'instagram', 'twitter', 'github'];

// Génération des liens
return (

{socialKeys.map((key) => (
<a
key={key}
href={b(${key}.href)}
aria-label={b(${key}.label)}
className="cursor-pointer hover:text-slate-500 dark:hover:text-slate-500"
>
{icons[key]}

))}

);
};

export default SocialLinks;`