Отображение данных с помощью динамических изображений

Question

Итак, у меня есть следующий компонент реакции

import React from "react";
import ReactDOM from "react-dom";

/// Get out static assets
import logo1 from '../images/scaffold/logo1.svg';
import logo2 from '../images/scaffold/logo2.svg';
import logo3 from '../images/scaffold/logo3.svg';
import logo4 from '../images/scaffold/logo4.svg';
import logo5 from '../images/scaffold/logo5.svg';
import logo6 from '../images/scaffold/logo6.svg';
import logo7 from '../images/scaffold/logo7.svg';

const Links = (props) => {
  return (
    <div>
    {Object.keys(props.link).map(i => (
      <a key={i} href={props.link[i]}
      target="_blank">
      <div className="release-action">
      <div className="release-distro-logo">
      <img src={logo1}/>
      </div>
      <span>Action1</span>
      </div>
      </a>
    ))}
    </div>
  )
}

export default Links;

Я хотел бы изменить логотип и текст action на основе данных, поступающих с реквизита . Можно ли использовать ключ пары значений в операторе if для этого? Так, например, если бы ключ был link2 , тогда использовался бы logo2 , а диапазон изменится на Action2 , в основном логотипы будут визуально представлять ссылку и ссылку URL будет использоваться в ссылке src.

ссылки загружаются через json и проталкиваются через реквизиты к компоненту

"isbn" : "3049204",
"author" : "author name",
"links": {
    "link1": "https://www.google.com",
    "link2": "https://www.yahoo.com",
    "link3": "https://www.facebook.com",
    "link4": "https://www.twitter.com",
    "link5": "https://www.instagram.com",
    "link6": "https://www.gmail.com"
  },
"cta" : "buy now"

Answer 1

Решением будет создание объекта, содержащего все доступные изображения, например:

const logos = {
 link1: logo1,
 link2: logo2,
 // ...
};

А потом в Реакте

const Links = (props) => {
  return (
    <div>
    {Object.keys(props.link).map(i => (
      <a key={i} href={props.link[i]}
      target="_blank">
      <div className="release-action">
      <div className="release-distro-logo">
      <img src={logos[i]}/>
      </div>
      <span>Action1</span>
      </div>
      </a>
    ))}
    </div>
  )
}