Array .map() is returning HTML [object Object]

Question

I'm trying to make simple animation text in React and JavaScript and my problem is that after mapping array with letters result in HTML what I get is [Object object]. Someone can explain what I do wrong.

animation = () => {
  let text = document.querySelector(".hi");
  let leterArr = [...text.textContent];
  text.textContent = "";
  leterArr.map(char => {
    return (text.innerHTML += "<span>" +{char} +"</span>")
  })
}

returning [object object] is not an issue .Beacuse you are returning an html tag.so Its shows like that only — Harifrais
– Harifrais, Commented Jul 5, 2020 at 14:33
You possibly meant to do leterArr.forEach(char => text.innerHTML += `${char} `) — mplungjan
– mplungjan, Commented Jul 5, 2020 at 14:34
possible duplicate of stackoverflow.com/questions/38548134/… — Harifrais
– Harifrais, Commented Jul 5, 2020 at 14:34
{ char } creates an object literal using shorthand property names. Just remove the {} — adiga
– adiga, Commented Jul 5, 2020 at 14:35
or better: text.innerHTML = leterArr.map(char => `${char}`).join("") — mplungjan
– mplungjan, Commented Jul 5, 2020 at 14:35

ezio4df · Accepted Answer · 2020-07-05 14:37:05Z

2

React translate {char} to Object. So, when you concat it with string the object becomes [Object object]

use this

animation = () => {
  let text = document.querySelector(".hi");
  let leterArr = [...text.textContent];
  text.textContent = "";
  leterArr.map(char => {
    return (text.innerHTML += `<span>${char}</span>`)
  })
}

answered Jul 5, 2020 at 14:37

ezio4df

4,4456 gold badges19 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Taghi Khavari · Accepted Answer · 2020-07-05 14:38:31Z

0

You need to do something like this:

animation = () => {
  let text = document.querySelector(".hi");
  let leterArr = [...text.textContent];
  text.textContent = "";
  let temp;
  leterArr.map(char => {
    temp += "<span>" + char +"</span>"
  })
  text.innerHtml = temp;
}

answered Jul 5, 2020 at 14:38

Taghi Khavari

6,6173 gold badges21 silver badges36 bronze badges

Collectives™ on Stack Overflow

Array .map() is returning HTML [object Object]

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related