Trying to map through document.getgetElementsByTagName in reactjs [duplicate]

Question

I am trying to map through the resulting Object when I run document.getElementsByTagName. I realize I can't map through objects, only arrays, but I cannot figure out how to convert it to an object to make it iterable.

my code looks like this:

const [h2, setH2] = useState([]); const getH2 = () => { setH2(document.getElementsByTagName("h2")); console.log(h2) }

which gives me the following result:

trying to map through h2 returns the error:

TypeError: h2.map is not a function

I've also tried h2.HTMLCollection.map() but it throws the same error.

How can I map thorugh the result of docuemnt.getElementsByTagName ? I tried converting the object to an array but unsuccessfully so far.

Rare you ever need to query the DOM in React. You typically have the source data that is used to fill those elements in your component already — charlietfl
– charlietfl, Commented Oct 26, 2020 at 23:56
in this case I need to create the html from a markdown file. Couldn't think of a different solution. — emha
– emha, Commented Oct 27, 2020 at 9:48

Erik · Accepted Answer · 2020-10-26 18:03:26Z

You could use Array.from.

For example returning the classes of each elem:

Array.from(document.getElementsByTagName('h2')).map(elem => elem.className)

SakoBu · Accepted Answer · 2020-10-26 18:13:06Z

You can try something like this:

function App() { const [h2, setH2] = useState([]); const getH2 = () => { const elements = []; const el = document.getElementsByTagName('h2'); for (const item of el) { elements.push(item.innerText); } setH2(elements); }; return ( <div> <h2>One</h2> <h2>Two</h2> <h2>Three</h2> <h2>Four</h2> <hr /> <button onClick={getH2}>Get Innner Text</button> <hr /> <ul> {h2.map((item, i) => ( <li key={i}>{item}</li> ))} </ul> </div> ); }

Live Demo: https://stackblitz.com/edit/react-vtb3fv

Collectives™ on Stack Overflow

Trying to map through document.getgetElementsByTagName in reactjs [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related