Блог

С помощью .map() метода create «,» разделитель между моими возвращенными элементами.

Я пытаюсь вернуть фрагмент HTML-кода со вставленными данными, используя обратные кавычки и ${} в проекте drag amp; drop list, где все создается из экземпляров интерфейса. Однако я сталкиваюсь с ошибкой? Не уверен, что я должен называть это ошибкой.

Есть ли способ удалить или пропустить разделители между итерациями?

Это мой main.js где я вызываю функцию createListInstance, которая содержит функцию из модуля, которая создаст экземпляр, а затем добавит к нему функциональность.

 ...
createListInstace(
    { title: document.querySelector('.modal-input').value, items: ['item1', 'item2'] }
...
);
 

Итак, я передаю вышеуказанные фиктивные данные в эту функцию.

 function createListInstace(data) {
    // Create list
    interfaces.listInstance(data);
    ...
}
 

Который появится здесь:

 export const listInstance = (data) => {
 ...
 ${data.items.map(item => {
        return (
            `<div class="list_el_wrapper draggable_item" draggable="true">
                <li class="list_el" >${item}</li>
                <button id="del-list_el" value=${item} type="submit">X</button>
            </div>`
        )
  })}
 ...
}
 

Я ничего не изменяю с первого шага до последнего.
И это то, что я получаю:

Из этого объекта:

Я пытался .join(" ") даже .split(" ") восстановить массив, но безрезультатно: ( Заранее спасибо!