How to set Object Value as Variable and not as String in JavaScript/React

userAk7q 0
Viewed 29

In React & Js I am saving an Input Name as a String in an Object :

window.ObjectOne = {
  ObjectOneKey : "MyInputName",
}

The Input Name is an Object Path Like "Object.FirstName" or a Variable Name "MyVariableName"

What I am Trying is to save the inpute name AS a Variable or Object Path, not as a String (Without Quote) like this :

window.ObjectOne = {
  ObjectOneKey : MyInputName,
}

What I want is to EXPORT this Object with Variable Name as Object Value to import it in another project/website... This way, Objects will always have VariableName as value to refer Localproject Variable (Easier to Edit One Variable value than Multiple Object Value)

Is there a Way to do it ? Tried to replace Quote in Object value but it's not working

object reactjs javascript
1 Answers

I think you're asking how to make sure that ObjectOne.ObjectOneKey always provides the current value of MyInputName, which is declared and updated elsewhere in the code, like this:

let MyInputName = "something";
// ...
MyInputName = "something else";

If so, you have to make ObjectOneKey an accessor property, like this:

window.ObjectOne = {
    get ObjectOneKey() { return MyInputName; }
};

Then, whenever you access ObjectOne.ObjectOneKey, you'll get the current value of MyInputName, even if it's changed since the object was created.

Live Example:

let MyInputName = "something";
window.ObjectOne = {
    get ObjectOneKey() { return MyInputName; }
};

// Just add an ever-increasing number to `MyInputName`:
let n = 1;
setInterval(() => {
    MyInputName = "something" + (n++);
}, 10);

document.querySelector("input[type=button]").addEventListener("click", () => {
    console.log(ObjectOne.ObjectOneKey);
});
Every time you click this button, you'll see a different value.
<input type="button" value="Show ObjectOne.ObjectOneKey">

That said, this is unlikely to be the best way to go about doing this. In modern environments, you can use JavaScript standard modules ("ESM") and just export MyInputName. Exports are live bindings in ESM, so every time a module uses its imported version of MyInputName, it sees the current value of the one in the original module, even if it's been changed.

For instance, suppose you have inputs.js:

// Export `myValue`
export let myValue = 0;
// Add to it every 10ms
setInterval(() => {
    ++myValue;
}, 10);

...and you have App.tsx importing and using myValue like this:

// ...
import { myValue } from "./inputs.js";

export default function App() {
    const onClick = () => {
        console.log(myValue);
    };
    return (
        <div>
            <input type="button" value="Click To See `myValue`" onClick={onClick} />
            <p>
                Click the button above and look in the console. You'll see a different number each
                time (unless you) click <strong>really</strong> quickly.
            </p>
        </div>
    );
}

Every click will see the then-current value of myValue. Live example on stackblitz.

T.J. Crowder0
Related