Omar Alves Omar Alves - 4 months ago 10
React JSX Question

Make react read a external variable defined outside the root component

I have a bundled React application loaded into a HTML by a tag. I would like to pass some initial data to this application and I would like to define this data in HTML or in some previously loaded javascript.

Any thoughts on how to accomplish that?

Best,

Answer

The react document have pretty clear example about this, see this tutorial

var PRODUCTS = [
  {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
  {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
  {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
  {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
  {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
  {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
];

ReactDOM.render(
  <FilterableProductTable products={PRODUCTS} />,
  document.getElementById('container')
);

Just notice that the variable must be loaded before calling to it, with correct scope.