Как динамически задавать бекграунд в инлайн стилях при переборе массива объектов

Question

есть массив объектов

let productsCategory = [{
    id: 'pc-laptop',
    name: 'Ноутбуки и компьютеры',
  },
  {
    id: 'phone-tv-electronics',
    name: 'Сматрфоны, ТВ и электроника',
  },
  {
    id: 'householdAppliances',
    name: 'Бытовая техника',
  }
]

есть код который перебирает массив и достает необходимые значения

<ul className='list'>
    {productsCategory.map(prod => (
      <li>
        <div>
            <div className={prod.id} 
            style={{
                marginRight:10 + 'px', 
                width: 20 + 'px', 
                height: 20 + 'px', 
                float: 'left', 
                backgroundPosition: 'center'
            }}>
            </div>
            <NavLink to={prod.id}>{prod.name}</NavLink>
        </div>
      </li>
    ))}
</ul>

сейчас присваиваю контейнеру класс {prod.id} и туда вставляю задний фон, но нужно добавить его в массив, и задавать динамически как с именем и id.

проблема в том, что путь указывается через url, который не должен быть строкой, из-за чего его принимает за переменную.

как написать в инлайн стилях background-image: url(...)?

Answer 1

Допустим, в массиве объектов у вас есть ключ url, в котором содержится url картинки, тогда задать инлайн стиль можно через шаблонные строки(шаблонные литералы):

<ul className='list'>
    {productsCategory.map(prod => (
      <li key={prod.id}>
        <div>
        <div className={prod.id} 
        style={{ backgroundImage: `url(${prod.url})` }}>
        </div>
        <NavLink to={prod.id}>{prod.name}</NavLink>
        </div>
      </li>
    ))}
</ul>

БЛОГ НА HUSL

Как динамически задавать бекграунд в инлайн стилях при переборе массива объектов

Ответы (1 шт):