Запятые при использовании метода map() в hint'е Яндекс карты (react-yandex-maps)

Question

Я создаю кастомный хинт при ховере метки, код выглядит примерно так:

properties={{ hintContent: `<div class="flex">
   ${states.map((state: string) => {
      if (state == 'vacant')
       return '<div class="w-3 h-3 rounded mr-1 bg-green"> </div>'
      if (state == 'occupied')
       return '<div class="w-3 h-3 rounded mr-1 bg-red"> </div>'
       return '<div class="w-3 h-3 rounded mr-1 bg-gray-brown"> </div>'
         })}
</div>`}}

Всё работает нормально, однако при рендере хинта, после каждого элемента мэпа появляется запята. Через девтулзы в элементах дом дерева она отображается просто как " , ". Не совсем понимаю, чем это вызвано и как с этим бороться

ps. Предоставил код только который рендерит зеленые кружки

https://codesandbox.io/s/react-yandex-maps-issue-101-forked-v3ql46?file=/src/index.js

Воссоздал появление запятых, по ховеру на плейсмарк видно

Answer 1

Помогли в issues либы. Из за того, что рендерится мэп как отдельные строки выставляются запятые, при помощи join(), можно объединить в одну строку и избавиться от запятых В случае примера: hintContent: arr.join('')

БЛОГ НА HUSL

Запятые при использовании метода map() в hint'е Яндекс карты (react-yandex-maps)

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