How can i give state to a external variable in react?

Question

I want to bind a external variable of my react component to a tag in this component, is this possible ?, the variable is changed by some functions triggered by my component and i want give state to her, "to follow the changes", but the problem is, this variable is external...

I'm new in react and javascript, researched a lot and by now i'm lost

i have a component like

function App() {

.....

return (
    <div className="App">
      <div id="ias-registers">
        <h3>PC: {PC}</h3> )
....;
}

var PC;

the external variable var PC is changed by a chain of actions(external functions but inside the App .js file) trigerred by my onClick in react form but i want follow this changes in my tag <h3> , i tried some different approaches, like put all the external functions inside the component and tried give state by hooks like

  const [values, setValues] = React.useState({
    multiline: '',
    IBR: IBR,
    PC: PC,
    IR: IR,
    MBR: MBR,
    MAR: MAR,
    AC: AC,
    MQ:MQ,
  });

maybe this is the way but i'm not doing it right

Answer 1

Use redux, it provide you a global state like a local storage inside browser,which you can accessed from any component in the app.

Find the below link for further understanding

https://www.robinwieruch.de/react-redux-tutorial