Question

102

How can I pass a variable from 'outside' to a react app?

rated 0 times [ 105] [ 3] / answers: 1 / hits: 29010 / 7 Years ago, tue, june 20, 2017, 12:00:00

I have created a react app using create-react-app my-app. I have an existing web page, and the react app attaches to a div within the html page - as per normal.

The web page has some global javascript constants const1 and const2 that are needed for the react app to function. Is there a way I can pass these variables to the react app? The structure is as follows

<script type=text/javascript>

  const const1 = 1234;

  const const2 = 5678;

</script>



<script type=text/javascript src = /static/react-app.js ></script>

I'm struggling because the javascript is of course minified during the build phase, so any declarations as follows:

class App extends React.Component{

  constructor(props) {

    super(props);

    this.state = {

      stat1: const1,

      stat2: const2,

don't work as the variables are re-written. I have tried to be sneaky and use eval as follows

const const1 = eval(function c1(){console.log(const1);return const1;};c1(););

but the eval (and the console.log) return undefined. Is there a way I can invoke a react component, and pass it variables from the outside?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dequant

Add To Favorites

Follow

Total Points: 88

Total Questions: 99

Total Answers: 95

Location: Ukraine

Member since Sun, Dec 13, 2020

4 Years ago

dequant questions

1 React App: EventSource's response has a MIME type (application/json) that is not text/event-stream. Aborting the connection

Sat, Aug 29, 20, 00:00, 4 Years ago

1 How to get Image Url from local Json file in React.js

Tue, Aug 4, 20, 00:00, 4 Years ago

1 Get next cron job timing in node-cron

Thu, Jun 25, 20, 00:00, 4 Years ago

1 How to get current latitude and longitude in vuejs

Sat, Jun 20, 20, 00:00, 4 Years ago

1 React lazy loading - when to use

Tue, Feb 25, 20, 00:00, 4 Years ago

View All

answered 7 Years ago terrellhunterm · Accepted Answer

I see two options here.

Assign the variables to the window object

Use environment variables

Using the window object

To use the window object, declare the variable as

myVar = 'someString'

or

window.myVar = 'someString'

In both cases you'll access the variable within React with window.myVar. Here's a quick example:

class App extends React.Component {

  render() {

    return (

      <div>

        <h1>Hello, React and ES6!</h1>

        <p>Let's play. :)</p>

        <p>{window.myVar}</p>

      </div>

    );

  }

}



ReactDOM.render(<App />, document.getElementById(app));

html,

body {

  height: 100%;

}



body {

  display: flex;

  justify-content: center;

  align-items: center;

  font-family: Helvetica Neue;

}

<script src=https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js></script>



<div id=app></div>

<script>

  window.myVar = 'someString2'

</script>

Using environment variables

The Create React App build allows for environment variables to be used within the app. To add an environment variable create a .env file in the root of your project, then add the appropriate variables and prefix the variable name with REACT_APP_. For example:

REACT_APP_MYVAR = "someString"

In the app these variables can be accessed within your components with {process.env.REACT_APP_MYVAR}, or within the HTML with %REACT_APP_MYVAR%.