How to initiate var in script tag?

Question

This is the first website I'm building and an API I want to use requires me that I create a variable inside a script like so.

<script>
var someVariable = {
  api_key: "api_key_here",
  debug: true
};
</script>

When I place it inside my index.html, the file compiles and the API succeeds. However, if I try to place that same snippet of code inside my render method to React, I get:

"} expected" after the "api_key"

I've tried to dangerouslySetInnerHTML to run the code and some other hacks but even if it does compile, on runtime I receive an error like this.

Objects are not valid as a React child (found: object with keys {api_key, debug}). If you meant to render a collection of children...

I've been stuck on this for the longest time and can't find a solution on the internet. I would really appreciate it if anyone can help point me in the right direction. Thank you.

Full Render Method

render() {
    return (
      <div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
  var pollfishConfig = {
    api_key: "api_key_goes_here",
    debug: true
  };
</script>
<script src="https://storage.googleapis.com/pollfish_production/sdk/webplugin/pollfish.min.js"></script>
      </div>
    )}

EDIT: I was able to get it to work using componentDidMount()

  componentDidMount() {
    const s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.innerHTML = "var pollfishConfig = {api_key: \"api_key_here\", debug: true,
closeCallback: customSurveyClosed}; function customSurveyClosed(){console.log("test");}";
    document.body.appendChild(s);
  }

Is there a way to make the function customSurveyClosed access the react class where the componentDidMount is called? For example, inside customSurveyClosed() change the state of the react component.

Please provide a [mcve]. In other words, show the exact `render()` method which causes this error. — Code-Apprentice, Apr 09 '19 at 21:45
I would put this in your main index.html, outside of react. In other words, you have something a bit like `ReactDOM.render(, document.getElementById("root"))` somewhere in your app, right? So there's an html file (or similar) that has `
`, right? Put this ` — p.s.w.g, Apr 09 '19 at 21:45
how does it look when place in your react component? it seems that you had some syntax error when adding to react file. and remember to remove script tag if you place in react component — duc mai, Apr 09 '19 at 21:45
Possible duplicate of [Adding script tag to React/JSX](https://stackoverflow.com/questions/34424845/adding-script-tag-to-react-jsx) — Aprillion, Apr 09 '19 at 21:46
I dont know your setup, but for example in your app.js where you mount your app you could do ```window.someVariable = { api_key: "api_key_here", debug: true }``` — optimisticupdate, Apr 09 '19 at 21:49
@p.s.w.g That does work but I'm not sure on how to access it from my react files. For example, `var pollfishConfig = { api_key: "api", debug: true, closeCallback: customClosed };` would trigger a function customClosed defined in the same index.html file. In this case, is it possible to make the function customClosed do something like change the state of a React component. — kimsbrian, Apr 10 '19 at 00:01
@hyde I put that in a function in App.js Thank you that does seem make the variable global. This variable is somehow supposed to interact with two other scripts and the only time I've actually gotten the functionality to work was when someVariable was actually put into a script. Is there a way to make it show up within a script tag? — kimsbrian, Apr 10 '19 at 00:58

score 1 · Answer 1 · answered Apr 09 '19 at 21:51

1

I wouldn't place the script tag in your render method. Instead, create the variable in your function that you use to do the API call. Here's an example:

export default class Form extends Component {

  signup = e => {
    var someVariable = {
      api_key: "api_key_here",
      debug: true
    };
    // other code logic
  }

  render() => {
    <button onClick={this.signup}>Click me!</button>
  }
}

answered Apr 09 '19 at 21:51

Nils Fahle

75
1
10

2

Presumably `someVariable` needs to be global, though. – Bergi Apr 09 '19 at 21:52
Adding this does remove the errors I was originally getting but I forgot to mention that once I create the variable, I also need to add a script after it. I tried adding `` where you commented code logic but I received "Expected an assignment or function call and instead saw an expression no-unused-expressions" I tried looking at other StackOverflow questions for this error but was unable to find a fix for it. – kimsbrian Apr 10 '19 at 00:30
Update: I realized I could just put the extra script tag in the render side but I think since this variable interacts with other scripts, it will somehow only work when it is itself also inside a script. That is really just my hypothesis but the only time I actually got the functionality to work was in the index.html file where I place someVariable inside the script like the original documentation instructed me to do. – kimsbrian Apr 10 '19 at 01:03

score 0 · Answer 2 · answered Apr 09 '19 at 22:09

0

You can use componentWillMount from your app class. And add global variables trough it. Like this:

componentWillMount: function () {
    window.someVariable = {
        api_key: "api_key_here",
        debug: true
    };
}

answered Apr 09 '19 at 22:09

Mikołaj Osowski

108
3

Adding this to my App.js file gives me Parsing error: In strict mode code, functions can only be declared at top level or inside a block. – kimsbrian Apr 10 '19 at 00:21

How to initiate var in script tag?

2 Answers2