How do I pass custom function inside .map function on newly created element?

Question

I am populating a <ul></ul> with <li></li> using fetch method api request.

The ul looks like the code below:

<ul id="todos" class="collection">
</ul>

The script that populates the todos:

fetch("http://localhost:3000/api/todos")
.then((resp) => resp.json())
.then((data) => {
  let todos = data;
  return todos.map(todo => {
    let liTodo = createNode("li");
    liTodo.innerHTML = '<button class="btn-small remove-todo" onclick="' + deleteTodo(`${todo._id}`) + '">Delete' + '</button>';
    liTodo.classList.add("collection-item");
    append(ulTodos, liTodo);
});

function createNode(element) {
  return document.createElement(element); // Create the type of element you pass in the parameters
}

function append(parent, el) {
  return parent.appendChild(el); // Append the second parameter(element) to the first one
}

function deleteTodo(id) {
  console.log("deleteTodo function called " + id);
}

Problem: Upon loading the page and checking console, I can see that deleteTodo() function is invoked even though I did not click it.

Do you know how can I properly pass the deleteTodo() with the id only when it is clicked?

Any help is greatly appreciated. Thanks.

A relevant question exists for this problem, for solutions please check: https://stackoverflow.com/questions/14425397/onclick-function-runs-automatically — Muhammad Murad Haider, Mar 18 '20 at 07:43
bind the event with addEventListner instead of inline functino — Juhil Somaiya, Mar 18 '20 at 07:44

MjZac · Answer 1 · 2020-03-18T07:51:29.517

1

You are invoking the deleteTodo unknowingly. Wrap the on click invocation in an arrow function.

liTodo.innerHTML = '<button class="btn-small remove-todo" onclick="() => deleteTodo(' + `${todo._id}` + ')">Delete' + '</button>';

edited Mar 18 '20 at 07:51

answered Mar 18 '20 at 07:40

MjZac

3,476
1
17
28

Hi. Thanks for this but it is still invoked inside the loop – redshot Mar 18 '20 at 07:47
@redshot My bad, updated the answer. Hope this helps. – MjZac Mar 18 '20 at 07:51

score 1 · Answer 2 · answered Mar 18 '20 at 07:41

1

You can convert to an arrow function.

Instead of

function deleteTodo(id) {
  console.log("deleteTodo function called " + id);
}

Use

const deleteTodo = (id) => {
  console.log("deleteTodo function called " + id);
}

answered Mar 18 '20 at 07:41

Burak Gavas

1,304
1
9
11

I don't think this helps, the problem is at invocation time... – V. Sambor Mar 18 '20 at 07:44
Hi. Thanks for this but it is still invoked inside the loop – redshot Mar 18 '20 at 07:47
Hmm, you are right. Actually, I would recommend you the react way of doing this. You are creating elements with string. Instead, you should create them with JSX (react way) by using 'map' function. That would be more accurate and resolve your problem. – Burak Gavas Mar 18 '20 at 07:54
@BurakGavas I'm currently only using ES6 for this. In react, the solution is just to wrap the deleteTodo(id) in an anonymous arrow function inside the map function – redshot Mar 18 '20 at 07:56
I mean in your return function you should have a JSX expression like: ` items.map((item, idx) =>
// your button and its function here

Burak Gavas

Mar 18 '20 at 08:01

score 1 · Answer 3 · answered Mar 18 '20 at 07:50

When you concat innerHTML like this:

'...click="' + deleteTodo(`${todo._id}`) + '"...'>

The function deleteTodo is called immediately, which returns undefined.

And actually the innerHTML you got is:

<button class="btn-small remove-todo" onclick="undefined">Delete</button>'

So, do not call it, just take it as string.

liTodo.innerHTML = `<button class="btn-small remove-todo" onclick="deleteTodo(${todo._id})">Delete</button>`;

V. Sambor · Accepted Answer · 2020-03-18T08:18:01.023

You can avoid using another function wrapper by using ES6 backticks for the entire button element.

This way the function will not get invoked before the event, since it's considered a string.

Look here a working example:

const ulTodos = document.getElementById('todos');

function myFetch() {
  let todos = [{id:1, text: "a"}, {id:2, text: "b"}, {id:3, text:"c"}];
  
  return todos.map(todo => {
    let liTodo = createNode("li");
    liTodo.innerHTML = `<button class="btn-small remove-todo" onclick="deleteTodo('${todo.id}')">Delete</button>`;
    liTodo.classList.add("collection-item");
    append(ulTodos, liTodo);
  });
}


function createNode(element) {
  return document.createElement(element); // Create the type of element you pass in the parameters
}

function append(parent, el) {
  return parent.appendChild(el); // Append the second parameter(element) to the first one
}

function deleteTodo(id) {
  console.log("deleteTodo function called " + id);
}
  
  
myFetch();

<ul id="todos" class="collection"></ul>

Hi. Thank you for this. You answer works for a static data. In my case, I am fetching data from mlab(MongoDB) and you answer did not work. I am getting undefined for each ID when I click the button — redshot, Mar 18 '20 at 08:17
Maybe you have put the wrong identifier for id, don't forget underscore `_id` before id. I removed it in my example :) — V. Sambor, Mar 18 '20 at 08:19

How do I pass custom function inside .map function on newly created element?

4 Answers4