Show Associated Model Data with React Rails

Question

I'm using the react-rails gem and have two models: Message and User. User has_many :messages.

In my message.js.jsx, I'd like to show the User of that message. In regular erb, it'd just be <%= message.user.name %>. How would I do this in the message.js.jsx component?

Answer 1

You could rename your component to message.js.jsx.erb and use ERB in it, but it will only be compiled once when Rails starts up.

A more React-ish way to handle is to AJAX load the user data in componentDidMount (or a Store, if using Flux).

message.js.jsx

getInitialState: function() {
  return { user: { name: '' } };
},

componentDidMount: function() {
  $.getJSON('/users/'+ this.props.id +'.json', function(userData) {
    if (this.isMounted()) {
      this.setState({ user: userData })
    }
  });
},

You can create a Rails endpoint to return userData as JSON something like this:

users_controller.rb

def show
  @user = User.find(params[:id])
  respond_to do |format|
    format.html # default html response
    format.json { render json: @user.to_json(only: [:id, :name]) }
  end
end

See Facebook's page on this for more details