Генерация имени переменной из строки в пропсах?

Question

[Rubical]

Доброго времени суток. Есть следующий код:

import smoke1Red from "./red/smoke-red-1.png";
import smoke1Blue from "./blue/smoke-blue-1.png";
import smoke1Brown from "./brown/smoke-brown-1.png";
import smoke1Gray from "./gray/smoke-gray-1.png";

const FogBackground: FC<FogBackground> = ({ color }) => {
  return (
    <section className={style.agSmokeBlock}>
      <div className={style.agSmoke1}>
        <img src={
            color === "red"
              ? smoke1Red
              : color === "blue"
              ? smoke1Blue
              : color === "brown"
              ? smoke1Brown
              : smoke1Gray
          } />
      </div>
    </section>

Суть кода, думаю, понятна. В зависимости от пропсов подтягивается та или иная картинка. Можно ли как-то данную запись упростить? Выглядит слишком громоздко, думал мб через шаблонные строки или через функцию, но не получается.
P.s использую TS, мб через какие enum можно как-то реализовать или типы?

Answer 1

[Алексей Уколов]

const images = {
  red: smoke1Red,
  blue: smoke1Blue,
  brown: smoke1Brown,
}

...

<img src={images[color] || smoke1Gray} />

Comments

[Rubical]

Спасибо) как-то не додумался