Ad

How To Pass Variable To React Component

- 1 answer

For example, we create a react component like this

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

ReactDOM.render(<HelloMessage name="John" />, mountNode);

So can i pass the message variable from server? Like this

ReactDOM.render(<HelloMessage name="{{ message }}" />, mountNode);
Ad

Answer

What you're trying to do should work. You can instantiate a JavaScript variable like you showed, you would just have that ReactDOM.render call rendered in your view server-side. No need to render the React component server-side, just have that render call rendered on the page.

For example, in your JavaScript file, have the component (HelloMessage) just as you showed.

Then, render your second snippet of code (server-side) on the page:

<script type="text/javascript">
    ReactDOM.render(<HelloMessage name="{{ message }}" />, mountNode);
</script>
Ad
source: stackoverflow.com
Ad