ReactJS: querySelectorAll .map function not working as expected with State

Question

I am trying to push my querySelectorAll .map function to a React State Array but its not working as expected.

const [affectedServices, setAffectedServices] = useState([]);

  function affectedTags() {
    Array.from(document.querySelectorAll(".active-tag")).map((tag) => {
      console.log(tag.innerHTML);
      setAffectedServices([tag.innerHTML]);
    });
  }

console.log(tag.innerHTML) will display all querySelected tags e.g.

Active tag 1
Active tag 2
Active tag 3

But when viewing the affectedServices state from React Dev tools, it only has one array which contains Active tag 3

Any ideas of what im doing wrong?

TIA

BTSM · Accepted Answer · 2021-05-20 12:16:28Z

2

Try like this. I think I will works for you.

const [affectedServices, setAffectedServices] = useState([]);

  function affectedTags() {
    setAffectedServices(Array.from(document.querySelectorAll(".active-tag")).map((tag) => {return tag.innerHTML})));
  }

answered May 20, 2021 at 12:16

BTSM

1,6638 gold badges14 silver badges29 bronze badges

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

1 Comment

yush Over a year ago

Thanks a lot for your really elegant solution. It works perfectly :)

VersifiXion · Accepted Answer · 2021-05-20 12:17:55Z

2

you need to push the value in the array at every loop, and not just replacing the previous value by a new, can you try this ?

useEffect(() => {
  console.log("affectedServices ", affectedServices);
}, [affectedServices]);

function affectedTags() {
    let result = [];

    Array.from(document.querySelectorAll(".active-tag")).forEach((el) => {
      result.push(el);
    });

    setAffectedServices(result);
  }

edited May 20, 2021 at 12:17

answered May 20, 2021 at 12:11

VersifiXion

2,2927 gold badges29 silver badges43 bronze badges

1 Comment

yush Over a year ago

Thanks for your effort here. its definitely a workable solution for sure :)

Collectives™ on Stack Overflow

ReactJS: querySelectorAll .map function not working as expected with State

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related