Trying to map through document.getgetElementsByTagName in reactjs

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.

Answer 1

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