React Functional Component: How to access variables from outside useEffect()

Question

I have simplified the issue below, I'm using the useEffect to ensure the dom has rendered before selecting the items, which works great and doesn't need a timeout before trying to get these elements, but then if I want to use these values in another component how do I access them?

The printAll() function cant find the variables.

import React, { useEffect } from 'react';

const Warning: React.FC = () => {
  useEffect(() => {
    const confirm = document.getElementById("confirm");
    const invalid = document.getElementById("invalid");
    const confirmed = document.getElementById("confirmed");
    const warningBar = document.getElementById("warning-bar");
  }, []);

  function printAll () {
    console.log(confirm);
    console.log(invalid);
    console.log(confirmed);
    console.log(warningBar);
  }

printAll()

  return (
    <div>
      <section className='warning-bar' id='warning-bar'>
        <div className='confirm' id='confirm'>Confirm</div>
        <div className='invalid' id='invalid'>Invalid</div>
        <div className='confirmed' id='confirmed'>Confirmed</div>
      </section>
    </div>
  );
};```

Answer 1

You cant access variable outside the block. If you want to access then you need to declare all variable outside the block of useEffect. You can do it in multiple ways like below.

Method 1: Declare variable outside.

import React, { useEffect } from 'react';

const Warning: React.FC = () => {
  let confirm;
  let invalid;
  let confirmed;
  let warningBar;

  useEffect(() => {
    confirm = document.getElementById("confirm");
    invalid = document.getElementById("invalid");
    confirmed = document.getElementById("confirmed");
    warningBar = document.getElementById("warning-bar");
    printAll();
  }, []);

  function printAll () {
    console.log(confirm);
    console.log(invalid);
    console.log(confirmed);
    console.log(warningBar);
  }

  return (
    <div>
      <section className='warning-bar' id='warning-bar'>
        <div className='confirm' id='confirm'>Confirm</div>
        <div className='invalid' id='invalid'>Invalid</div>
        <div className='confirmed' id='confirmed'>Confirmed</div>
      </section>
    </div>
  );
};

Method 2: Using useRef

import React, { useEffect, useRef } from 'react';

const Warning: React.FC = () => {
  let confirm = useRef({});
  let invalid = useRef({});
  let confirmed = useRef({});
  let warningBar = useRef({});

  useEffect(() => {
    printAll()
  }, []);

  function printAll () {
    console.log(confirm.current);
    console.log(invalid.current);
    console.log(confirmed.current);
    console.log(warningBar.current);
  }

  return (
    <div>
      <section className='warning-bar' ref={warningBar} id='warning-bar'>
        <div className='confirm' ref={confirm} id='confirm'>Confirm</div>
        <div className='invalid' ref={invalid} id='invalid'>Invalid</div>
        <div className='confirmed' ref={confirmed} id='confirmed'>Confirmed</div>
      </section>
    </div>
  );
};

Demo Link