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

[PCPbiscuit]

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

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

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

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

[mmarkelov]

@PCPbiscuit привет. В вашем примере в hintContent ${arr.map((x) => x)} в результате выполнения будет строка 1,2,3,4,5, так JS переводит массив в строку(аналогично методу join). Если вам нужен другой текст, то вам необходимо перевести массив в строку так как вам нужно. Если вам нужно на выходе получить строку 12345, то тогда нужно сделать как-то так:

hintContent: arr.join('')

[PCPbiscuit]

@mmarkelov Привет! Вы правы, в данном случае помогло. А что делать в ситуации, если у меня меп формата:

${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>'; })}

upd: Осознал глупость вопроса) Всё получилось

Благодарю за помощь!