如何在脚本标签中启动var？

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.

Answer 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>
  }
}

Answer 2

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
    };
}