How can I return the HTML block from inside of my map function?

Question

How can I return the HTML block from inside of my map function?

Here is my code:

const userList = document.querySelector('#userList');

userList.addEventListener('submit', (e) => {
  e.preventDefault();

  function renderUsers(doc) {
    doc.map((doci) => {
      ('<h1>' + doci.data().firstName + '</h1>')
    })
  }

  // get user info from firestore
  db.collection('users').get().then((users) => {
    return renderUsers(users.docs)
  })
})

Answer 1

map returns an array. So in you case if you need to get an array of h1 tags try below code

    var h1Array = doc.map((doci) => {
                     return  '<h1>' + doci.data().firstName + '</h1>'
                  })

if you dont want to use the return keyword you can use like this. I am not sure what data() does though.

doc.map((doci) => ('<h1>' + doci.data().firstName + '</h1>'))

h1Array will be an array like below.

['<h1>xxx</h1>', '<h1>xxx1</h1>', '<h1>xxx2</h1>' ]