Use imported variable as a dinamic prop in React

Question

Sorry for the noob question, but I'm a noob in React and I am strugling with this.

I have a file that exports a variable that is being mutated over time. Let's say something like this (not the real code, the variable is changing correctly):

// variable.js


let myVar = 0;


setInterval(() => myVar++, 3000);


export { myVar };

and a react component that has to display the current value:

import React, { Component, Fragment } from "react";
import { myVar } from './variable.js';

export default class myComponent extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Fragment>
        <div>{myVar}</div>
      </Fragment>
    );
  }
}

What would be the best approach to get the variable displayed correctly while they change? I have tryied to set is as a state, as a prop and rendering it directly, but I am missing something.

I can not export a getter function, as I don't know from the component when the variable is going to change, but maybe I can change the approach? maybe throwing an event in each change?

Rahul Sharma · Answer 1 · 2020-12-29T07:44:54.873

1

Try this, It won't work like the real-time update. But you can access like below

You can create a custom hook, that will update real-time

export default function useUpdate() {
    const [myVar, setState] = useState(0)
    
    setTimeout(function () {
        setState(myVar++);
    }, 3000);
    
    return [myVar, setState];
}



import React, { Component, Fragment } from "react";
import { useUpdate } from './variable.js';

export default () => {
    const [myVar] = useUpdate();
    return (
      <Fragment>
        <div>{myVar}</div>
      </Fragment>
    );
}

edited Dec 29 '20 at 07:44

answered Dec 29 '20 at 07:35

Rahul Sharma

9,534
1
15
37

`(setTimeout(function () {myVar++}, 3000))();` this will throw an error since setTimeout returns a number indicating its id, so you won't be able to invoke a number (although, you're probably taking it from the OPs question) – Nick Parsons Dec 29 '20 at 07:38
Yup, the code of this file is just for reference and not the real code, what I need is to have the real time update, sorry :( – Víctor Dec 29 '20 at 07:39
This is asynchronous now. Since we don't know when the data is available.. I am trying a solution...Which will work in all scenarios :) Give me a moment – Imran Rafiq Rather Dec 29 '20 at 07:41
Could you just return `return myVar;` and then remove the destructuing? `const myVar = useUpdate()`? – Nick Parsons Dec 29 '20 at 07:46
What is useState? the file of the variable is not a React class, just a JS regular file – Víctor Dec 29 '20 at 07:53
Probably a good idea to wrap the `setTimeout` block inside a `useEffect` and make sure to clear the `timeout` too to avoid memory loss issues. See [this approach](https://stackoverflow.com/a/53090848/10246447). – 98sean98 Dec 29 '20 at 08:54
The real code doesn't have timeouts, it's just a simple demo to show what I need to acomplish, but thanks – Víctor Dec 29 '20 at 08:55

Use imported variable as a dinamic prop in React

1 Answers1