Binding php database values to react.js

Question

I will try to make this question as short as possible.

I am trying to do some react.js server-side rendering but I am having a difficult time refactoring that info that I aquired from doing research online and applying it to my project.

I am using route model binding for all my routes in the application using the username in the mysql database. I have some routes within the react.js

Look at the snippet below:

var FileUpload = React.createClass({

  handleFile: function(e) {
    var reader = new FileReader();
    var file = e.target.files[0];

    if (!file) return;

    reader.onload = function(img) {
      React.findDOMNode(this.refs.in).value = '';
      this.props.handleFileChange(img.target.result);
    }.bind(this);
    reader.readAsDataURL(file);
  },

  render: function() {
    return (
      <input ref="in" type="file" accept="image/*" action="images/{user}/dpUpload" onChange={this.handleFile} />
    );
  }
});

If you take a look within render:function() where the HTML input tag, action has a route of images/{user}/dpUpload . Everyone who knows laravel that {user} can bind to be admin in a RESTful way. I need to bind whatever value the database gives me to react. This is what I'm currently getting

Answer 1

You'd like the user variable available in React without having to do an ajax request for it?

You could embed it in the DOM. Perhaps in a data-user attribute.

// On your page
<div id="user" data-user="admin"></div>

// In React
render: function() {
    var user = document.getElementById("user").getAttribute("data-user");
    return (
      <input 
        ref="in" 
        type="file" 
        accept="image/*" 
        action="images/{user}/dpUpload" 
        onChange={this.handleFile} />
    );
}

You could also just put the user variable within a script tag on your page and access it in React with window.myUserVariable .