Access elements inside element with ref

Question

<div ref={location} className={style.locations}>
        {locations.map(loc => (
          <span onClick={onClick}>
            {loc.name}
          </span>
        ))}
</div>

I want to access the <span> inside the <div> with "location" ref:

const span = location.current.getElementsByTagName("span");
span.forEach(el => {
   el.style.display = "none";
})

But I just get error:

span.forEach is not a function

Does this answer your question? [Why can't I use Array.forEach on a collection of Javascript elements?](https://stackoverflow.com/questions/39797101/why-cant-i-use-array-foreach-on-a-collection-of-javascript-elements) — palaѕн, Apr 02 '20 at 13:44

score 1 · Answer 1 · answered Apr 02 '20 at 13:43

1

Try this

[...span].forEach(el => {
   el.style.display = "none";
})

answered Apr 02 '20 at 13:43

iamhuynq

5,357
1
13
36

Access elements inside element with ref

1 Answers1