Как динамически подставлять иконки для ключей объекта?

Question

[Alexander]

Из сервера приходит объект

"contacts": {
                    facebook: "",
                    github: "",
                    instagram: "",
                    mainLink: null,
                    twitter: "",
                    vk: "",
                    website: null,
                    youtube: null
                }

, нужно для каждого ключа подставлять иконку material ui, как это можно реализовать? буду благодарен за ответ

Исходный код сейчас

{Object.keys(profile.contacts).map((key) => {
                return (
                  <Contact
                    key={key}
                    contactTitle={key}
                    contactLink={
                      <a target='_blank' rel='profile' href={`${profile.contacts[key as keyof ContactsType]}`}>
                        {profile.contacts[key as keyof ContactsType]}
                      </a>
                    }
                  />
                )
              })}


const Contact: React.FC<ContactPropsType> = ({ contactTitle, contactLink }) => {
  return (
    <div>
      <span>
        {contactTitle}: {contactLink}
      </span>
    </div>
  )
}

Answer 1

[shading]

Создаешь функцию, которая возвращает тебе компонент material UI по ключу?

getIcon = key => {
  switch(key) {
      case: 'facebook': 
         return {
              <MaterialUiComponent {...rest} />
         }
   }
}



const Contact: React.FC<ContactPropsType> = ({ key, contactTitle, contactLink }) => {
  return (
    <div>
      <span>
        {getIcon(key)}
        {contactTitle}: {contactLink}
      </span>
    </div>
  )
}

Comments

[Alexander]

Только-что также сделал через switch и вынес функцию в другую папку

export const generateIcon = (key: string) => {
  switch (key) {
    case 'facebook':
      return <FacebookIcon />
    case 'github':
      return <GitHubIcon />
    case 'instagram':
      return <InstagramIcon />
    case 'mainLink':
      return <LinkIcon />
    case 'twitter':
      return <TwitterIcon />
    case 'vk':
      return <DeveloperBoardIcon />
    case 'website':
      return <WebIcon />
    case 'youtube':
      return <YouTubeIcon />
    default:
      return null
  }
}

Спасибо

[shading]

Alexander, Но лучше сделать объект с ключами, как сделал Александр ниже, так меньше кода и не засоряешь память

Answer 2

[Александр]

https://codesandbox.io/s/qna-q963407-lgkp1